4

次のようにASP.NETにページがあります。

JSFIDDLE http://jsfiddle.net/nyrUp/

HTML

    <div class="mainContainer">
        <div>
            <div class="topLeft">
                <% =DateTime.Now.Ticks.ToString()%>
            </div>
            <div class="topRight">
                foo
            </div>
        </div>
        <div>
            <div class="bottomLeft">
                foo
            </div>
            <div class="bottomRight">
                foo
            </div>
        </div>

        <div class="underneath">
            foo
        </div>
    </div>

CSS

.mainContainer {
}
.topLeft {
    width: 50%;
    float: left;
    background-color: red;    
}

.topRight {
    width: 50%;
    float: left;
    background-color: orange;
}

.bottomLeft {
    width: 50%;
    float: left;
    background-color: yellow;
}

.bottomRight {
    width: 50%;
    float: left;
    background-color: green;
}

.underneath {
    width: 100%;
    background-color: blue;
}

任意の div にコンテンツを追加するまで、これは正常に機能し、その時点でレイアウトが壊れます

壊れたレイアウトを示す JSFIDDLE: http://jsfiddle.net/4gbP8/

コンテンツが追加されたときにこのレイアウトを維持するにはどうすればよいですか?

すなわちここに画像の説明を入力

4

4 に答える 4

2

HTML を更新できるかどうかはわかりませんが、新しいクラスを追加できる場合は解決策があります。

clearさまざまなレベルを押し下げるのに役立ち、それらにもう少し構造を与えるというクラスを追加しました。

JSFIDDLE

CSS

.clear{clear:both;}

HTML

 <div class="mainContainer">
            <div class="clear">
                <div class="topLeft">
                    <p>123</p>
                    <p>123</p>
                    <p>123</p>
                    <p>123</p>
                </div>
                <div class="topRight">
                    foo
                </div>
            </div>
            <div class="clear">
                <div class="bottomLeft">
                    foo
                </div>
                <div class="bottomRight">
                    foo
                </div>
            </div>

            <div class="underneath clear">
                foo
            </div>
        </div>

それが役立つかどうか教えてください。

于 2013-05-09T13:25:21.477 に答える
2

そのため、トップと呼ばれる空の div にコンテナーを配置することで、それらを含めることができました。私が正しく理解していれば、各ボックスでページを埋めたいと思います。

http://jsfiddle.net/4gbP8/2/ CSS 追加

.top {
   display: inline-block;
   width: 100%;
   height: 100%;

 }

HTML

       <div class="top">
            <div class="topLeft">
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
            </div>
            <div class="topRight">
                foo
            </div>
        </div>
于 2013-05-09T13:30:59.757 に答える
1

2 件の問題があります

列の分布を維持するには、フロートをクリアする必要があります

背景を保持するには、負のマージンを使用する必要があります。「equ」誇張されたパディング

あなたはこれを得るでしょう

（デモと完全なコーディングでこのフィドルを参照してください）

ここに画像の説明を入力

浮動要素のペアごとにラッパーを含める必要があり、ネガティブ マージン トリック用の css を含める必要があります。マークアップは次のようにする必要があります。

<div class="mainContainer">
            <div class="wrapper">
                <div class="topLeft">
                    <p>123</p>
                    <p>123</p>
                    <p>123</p>
                    <p>123</p>
                </div>
                <div class="topRight">
                    foo
                </div>
            </div>
            <div class="wrapper">
                <div class="bottomLeft">
                    foo
                </div>
                <div class="bottomRight">
                    <p>123</p>
                    <p>123</p>
                    <p>123</p>
                    <p>123</p>

                </div>
            </div>

            <div class="underneath clear">
                foo
            </div>
        </div>

各フローティング div には次を含める必要があります

{
   ...
    padding-bottom:2000px;
    margin-bottom:-2000px;
...
}

....左の div には次を含める必要があります

{
  ...
  clear:left;
...
}

また、フローティング div の各ペアに含めるラッパーは、

.wrapper {
    overflow:hidden;
}
于 2013-05-09T13:39:43.957 に答える