请考虑以下代码:
<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
编辑
使用表格不是一个选项,我需要某种"多级"/"嵌套"布局,其中第二个col始终位于相同位置:
| 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 | ...
(当然没有"|"s)
Spu*_*ley 54
使用时position:absolute;,元素将从正常页面流中取出.因此它不再影响其容器元素的布局.所以容器元素没有考虑它的高度,所以如果没有别的设置高度,那么容器将是零高度.
此外,设置display:inline-block;对于元素没有任何意义position:absolute;.同样,这是因为绝对定位将元素排除在页面流之外.这与此不一致inline-block,这只会影响元素如何适应页面流.所有元素都position:absolute;被自动视为display:block,因为这是绝对定位的唯一逻辑显示模式.
如果您需要绝对定位,那么高度问题的唯一解决方案是设置容器盒的高度.
但是,我怀疑你可以做到没有绝对定位.
看起来你要做的就是将<span>每个块中的第二个定位到块中的固定位置,以便它们对齐.
这是一个经典的CSS问题.在"糟糕的日子"中,网页设计师可以使用表格来完成它,桌面单元格上有固定的宽度.这显然不是今天的网页设计师的答案,但它引起了很多问题.
使用CSS有很多方法可以做到这一点.
最简单的方法是将两个<span>元素都设置为display: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;}
问题更新后 [编辑]
以下是我将如何实现您现在所要求的:
<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;}
少量的额外标记,但它确实达到了你想要的效果.