1

サイトにブロックがあり、そのようなことをしたい: http://s13.postimg.org/6ue9a8bfr/Untitled_3.png

しかし、私に何が起こるかはこれです: http://s15.postimg.org/derz2m8h7/image.png

これは私の div css です:

        background-color: #ffffff;
        width: 37.2%;
        border-top: 4px solid black;
        margin: 14px 0.4% 14px 0.4%;
        float: left;
        -webkit-border-radius: 2px;
        border-radius: 2px;

どうすればこれを行うことができますか?

ありがとう！

4

2 に答える 2

2

古い方法:

1 行 (tr) と 3 つのセル (td) を持つテーブルを使用し、これらのセルに DIV を配置し、セルが valign=top であることを確認します。

テーブルレイアウトを敬遠する人：

列を表す 3 つのコンテナー DIV を使用し、それらを相対的に並べて配置します (float:)。

現代的な方法:

フレックスボックスの配置https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxesを使用するか、CSS column-* プロパティhttp://playground.html5rocks.com/#columnsを使用します

于 2013-07-17T11:53:09.290 に答える
0

3 つの個別のコンテナー div を使用して、3 つの列を表します。適切な幅に設定された各列内で、コンテナー内に div を作成し、それぞれを 100% に設定します。これにより、列コンテナーの幅全体が埋められ、その下に他の div 要素が強制されます。次に、適切な余白を追加します。

于 2013-07-17T11:58:45.583 に答える