如何在添加内容时保持CSS布局（ASP.NET）

Question

我在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/

如何在添加内容时保持此布局？

即

Answer 1

所以我能够通过在空白div上放置一个容器来包含它们，称为top。我认为，如果我理解正确，你希望每个框填充页面。

http://jsfiddle.net/4gbP8/2/ CSS ADD

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

Answer 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> 

让我知道，如果有帮助或者我可以tweek的东西，使之更好地为自己

Answer 3

你有2个问题

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

为了保持你必须使用neg的背景ative利润“EQU”夸张垫衬

你会得到这个

（ 见本fiddle有示范和全编码）

您必须包括wrapers每对浮动元素和一些css为负利润技巧 Markup应该如下

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

而wraper被包括对于每对浮动的div应该是

.wrapper { 
    overflow:hidden; 
} 

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

如果内容需要回流窄设备，隐藏的媒体查询靶向更宽设备背后的显示属性。