请考虑以下代码：
<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;}
