Question

请考虑以下代码：

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

（当然没有“|”）

Answer 1

使用position:absolute;时，该元素将从正常页面流中取出。因此它不再影响其容器元素的布局。所以容器元素没有考虑它的高度，所以如果没有别的设置高度，那么容器将是零高度。

此外，设置display:inline-block;对position:absolute;的元素没有任何意义。同样，这是因为绝对定位将元素排除在页面流之外。这与inline-block不一致，position:absolute;仅存在影响元素如何适应页面流的情况。 display:block的所有元素都会自动视为<span>，因为这是绝对定位的唯一逻辑显示模式。

如果需要绝对定位，那么高度问题的唯一解决方法是设置容器盒的高度。

然而，我怀疑你可以做到没有绝对定位。

看起来你要做的就是将每个块中的第二个<span>定位到块中的固定位置，以便它们对齐。

这是一个典型的CSS问题。在“糟糕的日子”中，网页设计师可以使用表格来完成它，桌面上有固定的宽度。这显然不是今天的网页设计师的答案，但它引起了很多问题。

使用CSS可以通过多种方式实现。

最简单的方法是将display:inline-block;元素设置为<div class='section'> <span class="element-left">some text</span> <span class="element-right">some text</span> </div>，并为它们提供固定的宽度。

例如：

.section span  {display:inline-block;}
.element-left  {width:200px;}
.element-right {width:150px;}

使用以下CSS：

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

问题更新后

[编辑]

以下是我将如何实现您现在所要求的目标：

.section span  {display:inline-block;}
.element-left  {width:200px;}
.indent-1 {padding:10px;}
.indent-2 {padding:20px;}
.element-right {width:150px;}

使用以下CSS：

{{1}}

少量的额外标记，但它确实达到了你想要的效果。

Answer 2

没有

你可以绝对定位然后在visible: none的部分框中有一个元素的副本，但按定义绝对定位使它成为一个“浮动”元素，不会与它上面的元素交互。

假设您的页面布局已修复，您可以使用padding-left: #px;来实现目标，因为我不认为相对定位是您想要的。

或者，您可以使用display: table-*强制它保留更严格的形式，而不会影响文档结构，如图所示here

然而，根据您是否希望细胞是流动的，如果您不喜欢预定的宽度设置并希望单独的.section's行，则可能需要将.section div更改为display: table-row起来。

Answer 3

事实上，这可以通过div轻松简单地完成。您只需要在内联或块显示div中放置一个div位置：relative。将其宽度和高度设置为与包含div相同。然后你会发现你可以在里面放置另一个div。

CSS：显示：内联块和定位：绝对

3 个答案: