静态元素：绝对

我有以下标记：静态元素：绝对

<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个元素来达到这个效果？

请注意，“底部”不是页面上的最后一个元素。我只是简单地将“左”和“右”放在一行中，页面流从下面的行继续进行默认定位。

编辑：除了公认的答案...如果你没有静态的高度或出于某种原因不想硬编码，也可以达到类似的效果：

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

来源

2011-07-05 Konrad Garus

“底部”div与“左”和“底”部分重叠。 ......'底部'div与自身**重叠？ –

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

来源

2011-07-05 20:14:56 sdleihssirhc

不知道为什么您使用的位置是：绝对

如果你需要给出的布局，你可以试试这个？

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

来源

2011-07-05 20:41:17 kheya

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

CSS is Cascading Style Sheets。它被设计来做造型。它也做了一些布局，almost。

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

随着位置：（使用position:absolute内position: relativesee also this technique）有可能有“左”的绝对答案的div固定的宽度和“右”的div占用宽度的其余部分（或使用百分比都如果你喜欢）通过给予宽度并留在两个div上。但是，由于绝对div在页面流之外，因此底部div不能正常流动。如果内容的高度是固定的，您可以提供一个固定的高度。如果没有，你运气不好，必须尝试不同的技术。

与Projapati的float + margin技术的流程很好 - 但有一个2像素固定宽度的像素和另一个占用容器宽度的其余部分是不可能的 - 你可以指定百分比或宽度以div为单位，但没有办法告诉div要占用“其余部分”。另外，如果您将页面设置得非常窄，则“Right”div会落到下一行，表示这些div只是暂时彼此相邻。

总之，这两种方法都是复杂的黑客攻击，其目的不是为了这项任务而设计的，而且都做了人们想要做的有限子集。这里有很多的问题，在计算器上（如this one）是问类似的细节，都在tar pit陷入试图微调特定CSS技术，以逼近理想的布局，并沿着“为什么的线，所以很多答案做那个？“，”不要用那种技术，它不会做你想做的事“和”你不能正确理解CSS“。

事情是，你不想要float: left。你不想要position: absolute。这些是最终的可能方法，这是任何人都可以简单描绘和理解的简单布局，并且难以理解CSS为什么处理不好。 CSS之间和人们期望它做什么之间存在基本的不匹配。诚然，当人们开始使用CSS时，他们确实不了解CSS。但CSS是为我们的利益而建立的，它使我们失败了。错误在CSS中，而不在其用户中。

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

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

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

如果你想改变这种状况，以左列占20％的宽度，或修复右边栏，而不是，或修复的高度，改变CCS的一条线，你就大功告成了。使用目前的技术，当您达到目前使用的css hack的限制时，您将从头开始使用不同但具有同等严格限制的黑客。恕我直言，CSS网格比大多数人意识到的要大得多，他们会让所有这些愚蠢的CSS布局hackery终于消失。

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

来源

2012-02-15 21:08:52 Anthony

+1这应该是被接受的答案;-)把一个绝对定位的div放入浮动相对定位的div是我需要的。谢谢，托尼。 – Stano

您可以使用Yahoo YUI CSS Grid builder生成这种灵活的柱布局。

输出是不是东西，我会想手工代码，它已经div的嵌套5深，并引用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规则很有趣，而且可能很重要。

来源

2012-03-22 20:42:48 Anthony

静态元素：绝对

回答

相关问题