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

fzsnzjdm 于 2023-06-25 发布在其他

关注(0)|答案(5)|浏览(142)

我有以下标记：

<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与“左侧”和“底部”div重叠。
我应该如何设计这三个元素来达到这个效果？
请注意，“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>

css

来源：https://stackoverflow.com/questions/6588309/static-elements-after-positionabsolute

5条答案

按热度按时间

dw1jzc5e1#

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

赞(0）回复(0）举报 2023-06-25

r8uurelv2#

这将是一个哲学的咆哮。其他的答案提供了具体的变通办法，这一个着眼于更大的图景。我一直在问自己“为什么”在这个问题上和类似的最近。
CSS是层叠样式表。它被设计用来做造型。它还做了一些布局，almost。
在其他答复中给出了两种达到预期效果的方法。
使用position：absolute答案（see also this technique在position: relative中使用position:absolute），可以通过在两个divs上给出width和left，让“Left”div有固定的宽度，“Right”div占据其余宽度（或者如果你喜欢的话，都使用百分比）。但是，底部div不能正确地在它下面流动，因为绝对div在页面流动之外。如果内容的高度是固定的，则可以提供固定高度。如果没有，你运气不好，必须尝试不同的技术。
使用Projapati的float + margin技术，流程是好的-但有一个2个div固定的宽度，以像素为单位，另一个占用容器的其余宽度是不可能的-你可以指定百分比，或宽度，以像素为单位为两个div，但没有办法告诉div占用“其余部分”。“Right”div福尔斯到下一行，表示这些div只是临时彼此相邻。
简而言之，这两种方法都是复杂的黑客，它们重新利用了不是为这项任务设计的结构，并且都只做了人们想要做的事情的有限子集。这里有很多关于StackOverflow的问题（例如：this one），要求类似的细节，所有的努力陷入tar pit试图微调特定的CSS技术以接近所需的布局，以及如此多的答案沿着“为什么要这样做？”，“不要使用这种技术，它不会做你想要的”和“你不理解CSS正确”。
问题是，你不想要float: left。你不想要position: absolute。这些都是达到目的的可能手段，这是任何人都可以草图和理解的简单布局，并且很难理解为什么CSS不能很好地处理。CSS所做的和人们期望它所做的事情之间有一个基本的不匹配。的确，人们在刚开始使用CSS的时候真的不理解它。但是CSS是为了我们的利益而构建的，它辜负了我们。问题出在CSS上，而不是用户。
所需布局看起来像网格。两列，两行。高度将扩展以填充内容。“左”在第一行和第一列中，宽度为总宽度的百分比或固定宽度，并且“右”是第一行和第二列，占据宽度的其余部分。“底部”是第二行内容，其跨越两列。或者“bottom”完全在网格之外，就在页面中的后面。
CSS中需要as proposed here网格布局，因为它们与人们对页面布局的看法非常接近，并且涵盖了各种各样的CSS黑客现在使用的所有情况。
你可以简单地指定一个CSS网格：“我想要一个有两列的网格。左边占100像素，右边占容器宽度的其余部分。高度将扩展以包含内容。剩下的部分在下面继续。”完成。
如果你想改变左栏占宽度的20%，或者修正右栏，或者修正高度，只需要修改一行ccs就可以了。用目前的技术，当你达到你目前使用的css破解的极限时，你从头开始用一个不同的破解，它有不同的但同样严重的限制。
恕我直言，CSS网格比大多数人意识到的更重要，它们会让所有这些愚蠢的CSS布局黑客行为最终消失。
好消息是，这将是doable in IE10和将与之竞争的浏览器。坏消息是，你将在很长一段时间内支持IE8和IE9。我的猜测until at least 2016。

赞(0）回复(0）举报 2023-06-25

mjqavswn3#

不知道为什么要使用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>

赞(0）回复(0）举报 2023-06-25

xpcnnkqh4#

您可以使用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规则的使用很有趣，可能很重要。

赞(0）回复(0）举报 2023-06-25

7xllpg7q5#

有时你可以很容易地使用负边距代替元素的位置。例如，您可以使用-->

margin-top: -20px;

而不是-->

position: absolute; Bottom: 25px;

然而，当我面对一个特定的问题时，我发现了这个解决方案，在阅读了网上的所有解决方案后，我发现我可以用这个方法来解决我的问题

赞(0）回复(0）举报 2023-06-25

我来回答

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

5条答案

相关问题

热门标签

最新问答