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

【问题标题】：CSS: display:inline-block and positioning:absoluteCSS：显示：内联块和定位：绝对
【发布时间】：2011-06-29 20:56:30
【问题描述】：

请考虑以下代码：

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

具有绝对定位的元素显然使包含框“忘记”了他需要的高度。

我需要在“部分”框内进行绝对定位，是否有其他解决方案？

提前致谢，杰罗尼莫

编辑

使用表格并不是一个真正的选择，我需要某种“多级”/“嵌套”布局，其中第二个列始终位于同一位置：

|第一列中的一些文字|第二列中的一些文本 |一些缩进的文本 |第二栏 |也缩进 |第二栏 |更多缩进 |第二列有很多文字 |让它包裹起来 |正文 | ... |呸呸呸| ...

（当然没有“|”）

【问题讨论】：

呸，很难想象这是什么检查出来 :) jsfiddle.net/Kyle_Sevenoaks/YTUnM 你想要的结果是什么？

标签： css css-position

【解决方案1】：

这实际上可以通过 div 轻松简单地完成。您只需在内联或块显示 div 内放置一个带有 position:relative 的 div。将其宽度和高度设置为与包含的 div 相同。然后你会发现你可以在其中绝对定位另一个 div。

【讨论】：

【解决方案2】：

当您使用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;}

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

【讨论】：

表格和定义“左”元素的宽度对我不起作用-请参阅我的问题中的编辑部分...
嗯，这似乎是一个有用的想法。我会尝试它是否适用于我的“真正”问题（因为我事先不知道我有多少级别，并且我的 HTML 是使用 XSLT 从 XML 生成的）。 :-)
@geronimo - 在实际级别上，在缩进意味着屏幕空间不足之前，您只能拥有这么多级别。而且它不太可能非常多，真的 - 在它开始看起来很愚蠢之前最多五个或六个，所以我会说你可能会得到一堆这样的编号类。
在我终于有时间再次处理这个问题之后，我可以说你的解决方案对我来说很好。我确实事先做了一些编号的课程。非常感谢！
谢谢！我正在处理一个包含 6 行数据的 CSS 生成表，其中大部分数据需要在单个行的范围内具有绝对位置。您的“内联块”解决方案非常完美！

【解决方案3】：

没有。

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

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

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

但是，如果您不喜欢预先确定的宽度设置并希望单独的 .section 对齐，则根据您是否希望单元格是流动的，您可能需要将 .section div 更改为 display: table-row。

【讨论】：