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

kx5bkwkv 于 2022-12-30 发布在其他

关注(0)|答案(3)|浏览(141)

请考虑下面的代码：

<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"框内的绝对定位，有别的解决方案吗？

- 编辑**

使用表格并不是一个真正的选择，我需要某种"多层"/"嵌套"布局，其中第二列总是在同一位置：

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

(of课程没有"|（s）

css

来源：https://stackoverflow.com/questions/5042467/css-displayinline-block-and-positioningabsolute

3条答案

按热度按时间

l7wslrjt1#

当你使用position:absolute;时，元素会从正常的页面流中移除，因此它不再影响容器元素的布局，容器元素不会考虑它的高度，所以如果没有其他东西可以设置高度，那么容器将为零高度。
此外，设置display:inline-block;对于position:absolute;元素没有任何意义。这也是因为绝对定位会将元素从页面流中取出。这与inline-block不一致，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;}

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

赞(0）回复(0）举报 2022-12-30

cpjpxq1n2#

没有。
您可以绝对定位，然后在剖面框内使用visible: none创建图元副本，但是绝对定位的定义使其成为“浮动”图元，不与其上方的图元交互。
假设你的页面布局是固定的，你可以使用padding-left: #px;来实现你的目标，因为我不认为相对定位是你想要的。
或者，可以使用display: table-*强制它保留更严格的形式，而不影响文档结构，如here所示
然而，取决于你是否希望单元格是流动的，如果你不喜欢预定义的宽度设置，并希望单独的.section对齐，你可能需要将.section div改为display: table-row。