添加内容时如何维护 CSS 布局（ASP.NET）答案

【问题标题】：How do you maintain CSS layout when adding content (ASP.NET)添加内容时如何维护 CSS 布局（ASP.NET）
【发布时间】：2013-05-03 23:37:24
【问题描述】：

我在 ASP.NET 中有一个页面如下。

JSFIDDLEhttp://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/

请问在添加内容时如何维护这个布局？

即

【问题讨论】：

您在下面有一些很好的答案。我将添加一些很好的资源来阅读有关“clearfix”的讨论：PositionIsEverything.com, Clearfix Micro

标签： html asp.net css

【解决方案1】：

我不知道你是否能够更新 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>

如果它有帮助，请告诉我，或者我可以调整一些东西以使其更好地为自己工作

【讨论】：

【解决方案2】：

所以我可以通过在空白 div 上放置一个名为 top 的容器来包含它们。我想如果我理解正确，您希望每个框都填满页面。

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>

【讨论】：

谢谢，这行得通。尽管我认为您不需要 CSS 中的 height:100% 。见jsfiddle.net/pYH5G
是的，高度是试图获得完整的宽度和高度，但没有发生，但是有一种方法可以做到这一点，这样您的网站就可以响应，如果响应（应该）很大问题。

【解决方案3】：

您有 2 个问题

为了保持列分布，您必须清除浮动

为了保留背景，您必须使用负边距“equ”夸张的填充

你会得到这个

( 请参阅此fiddle 演示和完整编码）

您必须为每对浮动元素包含包装器，并为负边距技巧包含一些 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;
}

【讨论】：

【解决方案4】：

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

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

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

【讨论】：