Question

我有以下标记：

<html>
<body style="margin:0;padding:0">
    <div>
        <div style="border:3px solid red; width:70%; position:absolute; left:2.5%">Left</div>
        <div style="border:3px solid blue; width:25%; position: absolute; left:72.5%">Right</div>
        <div style="border:3px solid black; width:95%; margin: 0 auto">Bottom</div>
    </div>
</body>
</html>

我想在这里实现的是三个div如下：

+---------------------------+--------+
|Left                       |Right   |
+---------------------------+--------+
|Bottom                              |
+------------------------------------+

然而，在我的标记中，“底部”div与“左”和“左”重叠。 “底层”。

我应该如何设计这3个元素来实现这种效果？

请注意，“bottom”不是页面上的最后一个元素。我只想将“左”和“右”放在一行中，并使页面流继续从以下行开始默认定位。

编辑：除了接受的答案...如果您没有静态高度或由于某种原因不想硬编码，您可以实现类似的效果：

<div style="border:3px solid red; width:70%; position:absolute; left:2.5%">Left</div>
<div style="border:3px solid blue; width:25%; margin-left:72.5%">Right</div>
<div style="border:3px solid black; width:95%; margin: 0 auto">Bottom</div>

Answer 1

我认为问题在于，当你绝对定位元素时，它们会从文档流中取出。所以后面的元素看不到它们，假设它们不在那里，然后跳起来。要让你的“底部”div在你的“左”/“右”div之下，你必须给它一个margin-top等于它们的高度（或类似的东西）。

Answer 2

这将是一个哲学上的咆哮。其他答案提供了具体的解决方法，这个解决了更大的图景。我一直在问自己“为什么”在这个问题和类似的最近。

CSS是层叠样式表格。它旨在做造型。它也做了一些布局，almost。

其他调查结果给出了两种达到预期效果的方法。

使用position:absolute中使用position: relative的位置：绝对答案（see also this technique）可以使“Left”div具有固定宽度并且“Right”div占用宽度的其余部分（或者如果你愿意，可以使用百分比），在两个div上给出宽度和左边。但是，由于绝对div位于页面流之外，因此底部div在其下方不能正常流动。如果内容的高度是固定的，您可以提供固定的高度。如果没有，你运气不好，必须尝试不同的技术。

使用Projapati的float + margin技术，流程很好 - 但是2个div中的一个具有固定宽度（以像素为单位），而另一个占用容器宽度的其余部分是不可能的 - 您可以指定百分比或两个div的宽度（以像素为单位），但没有办法告诉div占用“其余部分”另外，如果你使页面非常窄，“右”div会下降到下一行，表明这些div只是暂时相邻。

简而言之，这两种方法都是复杂的黑客攻击，它们重新构建了不是为此任务而设计的构造，并且都是人们想要做的有限的子集。这里有很多关于StackOverflow的问题（例如this one）要求类似的细节，所有问题都在tar pit陷入困境，试图微调特定的CSS技术以近似于所需的布局，这么多回答“为什么这样做？”，“不要使用那种技术，它不能做你想要的”和“你不能正确理解CSS”。

问题是，你不想要float: left。你不想要position: absolute。这些是最终的可能手段，这是任何人都可以绘制和理解的简单布局，并且发现很难理解为什么CSS不能很好地处理。 CSS的功能与人们期望的功能之间存在基本的不匹配。没错，当人们开始使用CSS时，人们真的不懂CSS。但CSS是为了我们的利益而建立的，它让我们失望了。错误在CSS中而不是在用户中。

所需的布局看起来像网格。两列，两行。高度扩大以填充内容。 “Left”位于第一行和第一列中，宽度为总宽度的百分比或固定宽度，“right”是第一行和第二列，占据宽度的其余部分。 “底部”是第二行内容，跨越两列。或者“底部”完全位于网格之外，就在页面之后。

CSS中需要网格布局as proposed here，因为它们非常接近人们对页面布局的看法，并涵盖了现在使用各种CSS黑客的所有情况。

你可以简单地指定一个CSS网格：“我想要一个有两列的网格。左边占用100个像素，右边占据容器宽度的其余部分。高度扩展到包含内容。其余的页面的下面是它。“完成。

如果要将其更改为左列占据宽度的20％，或者修改右侧列，或者修改高度，请更改一行ccs并完成。使用当前的技术，当你达到你正在使用的css hack的限制时，你从头开始使用不同的hack，它具有不同但同样严格的限制。

恕我直言CSS网格比大多数人意识到的要大，他们会让所有这些愚蠢的CSS布局hackery 最终消失。

好消息是，这将是doable in IE10以及与之竞争的浏览器。坏消息是你将在很长一段时间内支持IE8和IE9。我的猜测是until at least 2016。

Answer 3

不确定为什么使用position：absolute

如果您需要给出布局，可以尝试一下吗？

<div style="clear:both;">
        <div>
            <div style="border:3px solid red;width:70%;float:left;padding:3px">Left</div>
            <div style="border:3px solid blue;width:25%;float:left;padding:3px">Right</div>
        </div>
        <div style="clear:both;border:3px solid black;width:96%;padding:3px">Bottom</div>    
    </div>

可能难以用宽度中的％来控制。

你也可以尝试一下吗？您可以根据需要调整宽度。

通常我会将其保留在我的母版页中。这样所有子页面都可以。

<div style="clear:both;width:532px">
        <div>
            <div style="border:3px solid red;width:350px;float:left;padding:5px">Left</div>
            <div style="border:3px solid blue;width:150px;float:left;padding:5px">Right</div>
        </div>
        <div style="clear:both;border:3px solid black;width:516px;padding:5px">Bottom</div>    
    </div>

Answer 4

您可以使用Yahoo YUI CSS Grid builder生成此类灵活列布局。

输出不是我想要手工编写的东西，它有嵌套5深的div，并且引用YUI CCS库，当缩小时为6kb。尽管易于描述，但我不满意手动编码并不容易。

这是生成的html。没有CSS，这可能意义不大。

<html>
<head>
   <title>YUI Base Page</title>
   <link rel="stylesheet" href="http://yui.yahooapis.com/2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
   <style type="text/css">
   #custom-doc { width: 100%; min-width: 250px; }
   </style>
</head>
<body class="yui-skin-sam">
<div id="custom-doc" class="yui-t1">
   <div id="hd" role="banner"><h1>header content</h1></div>
   <div id="bd" role="main">
    <div id="yui-main">
    <div class="yui-b"><div class="yui-g">
Main content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
</div>
    </div>
    <div class="yui-b">Left bar. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div>

    </div>
   <div id="ft" role="contentinfo"><p>footer content.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></div>
</div>
</body>
</html>

它似乎在当前的Chrome和Firefox以及Internet Explorer 9中运行良好。请注意，右侧列位于标记中的左侧列之前 - float: right上使用了<div id="yui-main">。使用:after css规则很有意思，可能很重要。

位置后的静态元素：绝对值

4 个答案: