0

各行に 3 つの div (各 33% 幅) がある場合に、float ベースの行 (固定幅) でページをレイアウトしたいと考えています。各行を別の "行" div に含める必要がありますか (1 つの div - すべての行でワープすると仮定します)?

私が理解していることから、「行 div」は、各「33% div」の高さが異なる場合、または一部の行に 3 つ未満の「33% div」を含める場合にのみ必要です...(たとえば、-a 2 つの項目といくつかの空の領域を含む行...)。

結論として、すべての行に 33% 幅の 3 つの div が含まれ、それらのすべてが同じ高さである場合、行に含まれる div を追加する必要はありませんか?

ありがとう。

4

2 に答える 2

0

inline-blockいくつかの理由から、float の代わりに使用した方がよいでしょう。

  1. 1/3 幅のセルにラッピング div を使用している場合、フロートを使用するとラッピング div が折りたたまれます。
  2. セルの高さが異なる場合 (同じ高さになるとおっしゃいましたが、そうでない場合に備えて)、フロートは非常に悪い種類のミッシュマッシュの配置を作成し、全体が大きな災害になります。 .

一方、これを使用すると、物事ははるかにきれいになり、拡張が容易になります。また、ラッピング div は折りたたまれません。

.cell {
  display: inline-block;
  vertical-align: middle; // or top/bottom. depends on your taste :)
  width: 33%;
}
于 2013-08-09T18:37:10.803 に答える
0

これがあなたが望むものであると仮定して

<html>
<head>
    <title></title>
    <style rel="stylesheet" type="text/css">

        #container{
            position:relative;
        }

        .row{
            float: left;
            clear: both;
            width: 100%;
        }

        .row > div{
            width: 33%;
            float: left;
        }

        .row:nth-child(even){
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="row">
            <div>foo</div>
            <div>bar<br/>big</div>
            <div>baz</div>
        </div>
        <div class="row">
            <div>foo</div>
            <div>bar<br/>another<br/>big<br/>one</div>
            <div>baz</div>
        </div>
        <div class="row">
            <div>foo</div>
            <div>shizzle<br/>for<br/>my<br/>nizzle</div>
            <div>baz</div>
        </div>
    </div>
</body>
</html>

position:relative を含むコンテナーがあることを確認して、幅のパーセンテージがそのコンテナーの幅に基づいていることを確認してください。新しい行ごとに clear:both (またはその問題だけを残す)。

div.row を除外できるかどうかを尋ねている場合は、各行の最初の要素をクリアすれば可能ですが、セル自体で backgroundcolors を使用すると問題が発生します。

お役に立てれば

于 2013-02-11T18:28:53.753 に答える