html – 添加内容时如何维护CSS布局(ASP.NET)

概述我在ASP.NET中有一个页面如下. JSFIDDLE http://jsfiddle.net/nyrUp/ HTML <div class="mainContainer"> <div> <div class="topLeft"> <% =DateTime.Now.Ticks.ToString()%> 我在ASP.NET中有一个页面如下.

Jsfiddle http://jsfiddle.net/nyrUp/

HTML

<div >        <div>            <div >                <% =DateTime.Now.Ticks.ToString()%>            </div>            <div >                foo            </div>        </div>        <div>            <div >                foo            </div>            <div >                foo            </div>        </div>        <div >            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/

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

即

解决方法 所以我能够通过在空白div上放置一个容器来容纳它们,称为top.我想如果我理解正确,你希望每个盒子都填满页面.

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

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

HTML

<div >            <div >                <p>123</p>                <p>123</p>                <p>123</p>                <p>123</p>            </div>            <div >                foo            </div>        </div>

总结

以上是内存溢出为你收集整理的html – 添加内容时如何维护CSS布局(ASP.NET)全部内容，希望文章能够帮你解决html – 添加内容时如何维护CSS布局(ASP.NET)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。