0

同じ高さと幅の div を使用してグリッド構造を作成しようとしていますが、ボーダー CSSを適用できません

 .Container {
    width:1000px;
    position:relative;
    margin:0 auto;
}
.RowContainer {
    overflow:hidden;
    position:relative;
    height:200px;
    clear:both;
}
.RowContainer .Cell {
    position:relative;
    float:left;
    height:100%;
    width:200px;
    border:1px solid Black;


}

HTML

    <div class="Container">     
    <div class="RowContainer">
      <div class="Cell"><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum</p> </div>
        <div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div>
        <div class="Cell"><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum
        </p>  </div>
        <div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div>
    </div>
    <div class="RowContainer">
        <div class="Cell"><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum
        </p></div>
        <div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div>
        <div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div>
        <div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div>
    </div>  
    <div style="clear:both"></div>    
</div>

2つの問題があります

1. 境界線が最後の行に表示されていません。

2. すべてに同じボーダー プロパティを適用しているにもかかわらず、ボーダー幅が等しくないように見えます。

4

4 に答える 4

3

テーブルのようなものを作成しようとしているのなら、テーブルだけを使ってみませんか?

<table class="container">     
    <tr>
        <td><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum</p></td>
        <td><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></td>
        <td><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum</p></td>
        <td><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></td>
    </tr>
    <tr>
        <td><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum</p></td>
        <td><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></td>
        <td><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum</p></td>
        <td><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></td>
    </tr>
</table>
于 2012-07-19T17:32:36.630 に答える
1

とにあるため、下の境界線はどちらの行にも表示height: 100%されません。最初の行の下に表示されているのは、2番目の行の上部の境界線です。.Celloverflow: hidden.Container

そのhasheight: 100%;の要素の子を設定し、次にその子にofを設定すると、その境界線はすべての側で合計されますheight: 200pxoverflow: hiddenborder1px

202pxそれはその子要素を垂直に取り上げさせます。それ1pxは上の境界線から+ 200px高さから+ 1px下の境界線からです。

ただし、親要素の高さはandのみ です。つまり、子要素から垂直方向に見えるのは、上部の境界線と子の高さです。その高さと下の境界線はまだ隠されています。200pxoverflow: hidden1px199px1px1px

1px最初のセルの右の境界線と2番目のセルの左の境界線の両方があるため、2番目の垂直方向の境界線は最初の境界線よりも太くなります1px

これで問題は解決しますhttp://dabblet.com/gist/3145644

于 2012-07-19T17:32:45.967 に答える
0

境界線は100%の高さに設定されているボックスの外側に描画されるため、onはdivoverflow:hidden.RowContainer境界線を非表示にしています。を削除すると、再び表示されます。.Cell.Celloverflow:hidden

不均等な境界線については、jsfiddleを指定しなかったため、はっきりとは言えませんが、セル間の境界線が本来よりも厚いことを意味していると思います。これは、それぞれ.Cellに境界線がずっと並んでいるため、左右の境界線が隣り合って2pxの境界線のように見えます。

これを修正するには、それぞれの上部と左側に.Cell境界線を設定してから、の下部と右側に境界線を設定し.Containerます。

于 2012-07-19T17:35:24.427 に答える
0

オーバーフローを削除:hidden

このような

   .Container {
width:1000px;

margin:0 auto;


}



   .RowContainer {

height:200px;
clear:both;

}


 .RowContainer .Cell {
position:relative;
float:left;
height:100%;
width:200px;

  border:1px solid Black;
}

CSS オーバーフロー

ページ上のすべての要素は長方形のボックスです。これらのボックスのサイズ、配置、動作はすべて CSS で制御できます。動作とは、ボックスの内部と周囲のコンテンツが変更されたときに、ボックスがそれをどのように処理するかを意味します。たとえば、ボックスの高さを設定しない場合、そのボックスの高さは、コンテンツを収容するのに必要なだけ大きくなります。しかし、ボックスに特定の高さや幅を設定して、中身が収まらない場合はどうなるでしょうか? そこで、CSS オーバーフロー プロパティの出番です。これを使用すると、それをどのように処理するかを指定できます。

オーバーフロー プロパティには、visible (デフォルト)、hidden、scroll、および auto の 4 つの値があります。あまり広く採用されていない姉妹プロパティ、overflow-y と overflow-x もあります。

于 2012-07-19T17:53:37.910 に答える