2

レスポンシブ Web サイトを自分で構築する方法を学んでいます。画像の 1 つの上下の境界線にあるボックス サイズの境界線ボックスに問題があります。高さの異なる 2 列の画像があります。エッジを一致させたいのですが、各画像を区切るために数ピクセルの余白も必要です。

私の問題は、上と下の境界線でボックスサイズのボーダーボックスを使用すると、画像の端の外側にとどまり、次の画像を数ピクセル下に押し下げて、下端の隣の画像と一致しなくなることです。

先に進み、他の画像に境界線を追加する前に、この問題を修正したいと思います。私は CSS を初めて使用するので、何か明らかな間違いがあるのではないでしょうか?

境界線が画像の内側の端にとどまるようにするための助けをいただければ幸いです。

何が起こっているかのスクリーングラブを添付しました。 ボーダーボックス問題

 #rightCol {
   width: 50%;
   height: auto;
   float: right;
   box-sizing: border-box;
   border-left: 2px solid white;
 }
 #rightCol img {
   width: 100%;
   height: 100%;
   display: block;
 }
 #leftCol {
   width: 50%;
   height: auto;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   border-right: 2px solid white;
 }
 #leftCol img {
   width: 100%;
   height: 100%;
   display: block;
 }
 .innerBorder {
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   border-top: 4px solid white;
   border-bottom: 4px solid white;
 }
<div id="rightCol">
  <div>
    <img src="./images/pa.jpg" />
  </div>
  <div>
    <img src="./images/game.jpg" />
  </div>
  <div>
    <img src="./images/spine.jpg" />
  </div>
</div>


<div id="leftCol">
  <div>
    <img src="./images/truck.jpg" />
  </div>
  <div>
    <img class="innerBorder" src="./images/ccc.jpg" />
  </div>
  <div>
    <img src="./images/box.jpg" />
  </div>
</div>

4

1 に答える 1

0

あなたの .innerBorder スタイルは必要ないと思います。これを試して：

#rightCol {
   float: left;
   box-sizing: border-box;
   border-left: 2px solid white;
 }
 #rightCol img {
   max-width: 100%;
   height: auto;

 }
 #leftCol {
   float: left;   
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   border-right: 2px solid white;
 }
 #leftCol img {
   max-width: 100%;
   height: auto;

 } 


<div id="leftCol">
  <div>
    <img src="./images/truck.jpg" />
  </div>
  <div>
    <img src="./images/ccc.jpg" />
  </div>
  <div>
    <img src="./images/box.jpg" />
  </div>
</div>


<div id="rightCol">
  <div>
    <img src="./images/pa.jpg" />
  </div>
  <div>
    <img src="./images/game.jpg" />
  </div>
  <div>
    <img src="./images/spine.jpg" />
  </div>
</div>
于 2016-07-03T16:09:25.900 に答える