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/

添加内容时如何维护此布局？

IE在此处输入图像描述

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;
...
}

....left div 应包括

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

每对浮动 div 包含的包装器应该是

.wrapper {
    overflow:hidden;
}
于 2013-05-09T13:39:43.957 回答
1

表格/表格单元格显示属性可以满足您的需求：

http://jsfiddle.net/4gbP8/3/

.mainContainer {
}

.mainContainer > div {
    display: table;
    width: 100%;
}
.topLeft {
    width: 50%;
    display: table-cell;
    background-color: red;    
}

.topRight {
    width: 50%;
    display: table-cell;
    background-color: orange;
}

.bottomLeft {
    width: 50%;
    display: table-cell;
    background-color: yellow;
}

.bottomRight {
    width: 50%;
    display: table-cell;
    background-color: green;
}

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

如果内容需要针对窄设备重排，请将显示属性隐藏在针对更宽设备的媒体查询后面。

于 2013-05-09T14:06:26.600 回答