CSS:显示:内嵌块和定位:绝对

前端之家收集整理的这篇文章主要介绍了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>

绝对定位的元素可以让包装盒“忘记”他需要的高度。

我需要绝对定位的“部分”框内,是否有另一个解决方案呢?

提前致谢,
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                       | ...

(当然没有“|”)

解决方法

当使用position:absolute时,元素将从普通页面流中取出。因此,它不再影响其容器元素的布局。因此,容器元素不考虑其高度,因此如果没有其他设置高度,则容器将为零高度。

另外,设置display:inline-block;对于位置:绝对的元素没有任何意义。同样,这是因为绝对定位将元素从页面流中移出。这与内嵌块是不一致的,它只存在于影响元素如何适应页面流。所有元素的位置:绝对;被自动处理为display:block,因为这是绝对定位的唯一逻辑显示模式。

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

但是,我怀疑你可以做到没有绝对的定位。

看起来你想要做的是定位第二个< span>在每个块中到块中的固定位置,使它们排队。

这是一个经典的CSS问题。在“坏旧时代”中,网页设计师将使用表格,在表格单元格上固定宽度。这显然不是今天的网页设计师的答案,但这是一个很大的问题。

有很多方法可以使用CSS。

最简单的是设置< span>要显示的元素: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;}

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

原文链接:https://www.f2er.com/css/219535.html

猜你在找的CSS相关文章