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

I have a page in ASP.NET as follows.

我在ASP中有一个页面。净,如下所示。

JSFIDDLE http://jsfiddle.net/nyrUp/

JSFIDDLE http://jsfiddle.net/nyrUp/

HTML

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

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

This works fine, until you add content to any div, at which point the layout is broken

这可以很好地工作，直到您向任何div添加内容，此时布局被破坏

JSFIDDLE showing broken layout: http://jsfiddle.net/4gbP8/

显示破损布局的JSFIDDLE: http://jsfiddle.net/4gbP8/

How do I maintain this layout when content is added please?

当添加内容时，我如何维护这个布局?

i.e.

即。

4 个解决方案

#1

So I was able to contain them by placing a container on the blank div, called top. I think if I understand correctly you want each box to fill the page.

所以我可以通过在空白的div上放置一个容器来控制它们。我想如果我理解正确的话，你想让每一个盒子填满这一页。

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

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

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

 }

HTML

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>

#2

I dont know if you are able to update the HTML but I have a solution If you can add in a new class.

我不知道你是否能够更新HTML，但我有一个解决方案，如果你可以添加一个新的类。

I added a class called clear which help to push down the different levels and gives them a bit more structure.

我添加了一个名为clear的类，它有助于降低不同的级别，并赋予它们更多的结构。

JSFIDDLE

JSFIDDLE

CSS

CSS

.clear{clear:both;}

HTML

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>

Let me know if it helps or I could tweek something to make it work better for yourself

如果有帮助，请告诉我，或者我可以做些什么来让它更好地为你自己工作

#3

You have 2 issues

你有2个问题

In order to keep the column distribution you must clear the floats

为了保持列分布，必须清除浮点数

In order to kept the backgrounds you must use negative margins "equ" exaggerated paddings

为了保持背景，您必须使用“公式”夸张的边框

You will get this

你会得到这

( See this fiddle with demo and full coding )

(请参阅演示和完整编码)

You must include wrapers for each pair of floating elements and some css for the negative margin trick Markup should be as follows

您必须为每一对浮动元素包括wraper，为负边缘标记添加一些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>

Each floating div should include

每个浮动div应该包括

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

The ....left divs should include

的....离开div应该包括

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

And the wraper to be included for each pair of floating divs should be

每个浮动子的包装都应该包括在内

.wrapper {
    overflow:hidden;
}

#4

The table/table-cell display properties can do what you're looking for:

表/表单元显示属性可以完成您需要的工作:

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

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

If the content needs to reflow for narrow devices, hide the display properties behind a media query targeting wider devices.

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