请考虑以下代码:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <Meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style type="text/css"> .section { display: block; width: 200px; border: 1px dashed blue; margin-bottom: 10px; } .element-left,.element-right-a,.element-right-b { display: inline-block; background-color: #ccc; vertical-align: top; } .element-right-a,.element-right-b { max-width: 100px; } .element-right-b { position: absolute; left: 100px; } </style> <title>test</title> </head> <body> <div class="section"> <span class="element-left">some text</span> <span class="element-right-a">some text</span> </div> <div class="section"> <span class="element-left">some text</span> <span class="element-right-a">some more text to force line wrapping</span> </div> <div class="section"> <span class="element-left">some text</span> <span class="element-right-b">some text</span> </div> <div class="section"> <span class="element-left">some text</span> <span class="element-right-b">some more text to force line wrapping</span> </div> <div class="section"> <span class="element-left">some text</span> <span class="element-right-b">some more text to force line wrapping</span> </div> </body> </html>
绝对定位的元素可以让包装盒“忘记”他需要的高度。
我需要绝对定位的“部分”框内,是否有另一个解决方案呢?
提前致谢,
geronimo
编辑
使用表格并不是真正的选择,我需要一些“多层次”/“嵌套”布局,其中第二列总是在同一位置:
| some text in first column | some text in 2nd column | some indented text | 2nd column | also indented | 2nd col | even more indent | 2nd column with a lot of text that | makes it wrap | text | ... | blah blah | ...
(当然没有“|”)
解决方法
当使用position:absolute时,元素将从普通页面流中取出。因此,它不再影响其容器元素的布局。因此,容器元素不考虑其高度,因此如果没有其他设置高度,则容器将为零高度。
另外,设置display:inline-block;对于位置:绝对的元素没有任何意义。同样,这是因为绝对定位将元素从页面流中移出。这与内嵌块是不一致的,它只存在于影响元素如何适应页面流。所有元素的位置:绝对;被自动处理为display:block,因为这是绝对定位的唯一逻辑显示模式。
如果您需要绝对定位,那么唯一的解决方案就是设置容器盒的高度问题。
但是,我怀疑你可以做到没有绝对的定位。
看起来你想要做的是定位第二个< span>在每个块中到块中的固定位置,使它们排队。
这是一个经典的CSS问题。在“坏旧时代”中,网页设计师将使用表格,在表格单元格上固定宽度。这显然不是今天的网页设计师的答案,但这是一个很大的问题。
有很多方法可以使用CSS。
最简单的是设置< span>要显示的元素:inline-block;并给它们一个固定的宽度。
例如:
<div class='section'> <span class="element-left">some text</span> <span class="element-right">some text</span> </div>
与以下CSS:
.section span {display:inline-block;} .element-left {width:200px;} .element-right {width:150px;}
[EDIT]问题已更新
以下是我将如何实现你现在所要求的:
<div class='section'> <span class="element-left"><span class='indent-0'>some text</span></span> <span class="element-right">some text</span> </div> <div class='section'> <span class="element-left"><span class='indent-1'>some text</span></span> <span class="element-right">some text</span> </div> <div class='section'> <span class="element-left"><span class='indent-2'>some text</span></span> <span class="element-right">some text</span> </div>
与以下CSS:
.section span {display:inline-block;} .element-left {width:200px;} .indent-1 {padding:10px;} .indent-2 {padding:20px;} .element-right {width:150px;}