0

HTML ページに追加する必要がある Excel テーブルの画像があります。最初の 4 つは横に並べる必要はありません (ただし、それらの間にスペースを入れる必要はありません) が、最後の 2 つは横に並べる必要があります (それらの間にマージンはありません)。もともとランドスケープモード。さまざまな方法を試しましたが、どれも機能しません。HTMLとCSSを使用しています。コードは以下です。どんな助けでも大歓迎です。開発にはEclipse Junoを使用しています。

 //***Html file

 <div class="crop">
   <img src ="QATables/image1.png">
   <img src ="QATables/image2.png">
   <img src ="QATables/image3.png">
   <img src ="QATables/image4.png">     
   <img src ="QATables/image5.png" border="0"><img src ="QATables/image6.png" border="0"/>


 </div> 

  //*****CSS file

  .crop img {width:850px; height:791px; margin: 0px;border-bottom:0}
4

1 に答える 1

3

スタイリングに使用できる 2 つのクラスを追加します。

<div class="crop">
   <img src ="QATables/image1.png" class="vertical">
   <img src ="QATables/image2.png" class="vertical">
   <img src ="QATables/image3.png" class="vertical">
   <img src ="QATables/image4.png" class="vertical">     
   <img src ="QATables/image5.png" class="horizontal">
   <img src ="QATables/image6.png" class="horizontal">
</div>

次に、次のようにします。

.vertical {
    margin-bottom: 10px;
    display: block; /* Force images to be shown vertically */
}

.horizontal {
    float: left;
}

デモ

于 2013-01-15T21:37:46.190 に答える