CSS：display：inline-block和定位：绝对

小编典典

CSS：display：inline-block和定位：绝对

css

请考虑以下代码：

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

具有绝对定位的元素明显使容纳箱“忘记”他需要的高度。

我需要在“节”（section）框内进行绝对定位，对此还有其他解决方案吗？

在此先感谢geronimo

编辑

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

| 第一栏中的一些文字| 第二栏中的一些文字
  | 一些缩进的文字| 第二栏
  | 也缩进| 第二列
    | 更缩进| 第二栏包含大量文字
                                  | 包裹起来
  | 文字| ...
| 等等 ...

（当然没有“ |”的情况下）

阅读 411

2020-05-16

共1个答案

小编典典

使用时position:absolute;，该元素将从正常页面流中删除。因此，它不再影响其容器元素的布局。因此，容器元素不考虑其高度，因此，如果没有其他设置高度，则容器将为零高度。

此外，display:inline- block;对于元素而言，设置没有任何意义position:absolute;。同样，这是因为绝对定位使元素脱离了页面流。这与不一致inline- block，后者仅影响元素如何适合页面流。position:absolute;自动将所有元素视为display:block，因为这是绝对定位的唯一逻辑显示模式。

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

但是，我怀疑您可以没有绝对的定位。

看来您要执行的操作是将<span>每个块中的第二个定位到块中的固定位置，以便它们对齐。

这是一个经典的CSS问题。在“过去的日子”中，网页设计师会使用表格来完成此工作，表格单元格上的宽度是固定的。这显然不是当今Web设计师的答案，但这引起了很多问题。

有许多使用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;}

[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;}

少量的额外标记，但确实可以达到您想要的效果。

2020-05-16