CSS：display：inline-block和定位：绝对
请考虑以下代码：
<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始终位于同一位置：
| 第一栏中的一些文字| 第二栏中的一些文字
| 一些缩进的文字| 第二栏
| 也缩进| 第二列
| 更缩进| 第二栏包含大量文字
| 包裹起来
| 文字| ...
| 等等 ...
（当然没有“ |”的情况下）
问题答案：
使用时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;}
少量的额外标记，但确实可以达到您想要的效果。
-
当一个元素的 position属性设置为 absolute 或 fixed，它将使用绝对定位。绝对定位的元素将从文档流中完全删除，它原先在正常文档流中所占的空间会关闭，就好像该元素不存在一样，因此不会在原先的位置留下空白。 绝对定位的元素相对它的包含块进行定位。position: absolute 元素的包含块是最近已定位（position属性被设置，且不是static）的祖先元素，如果没有已定位
-
问题内容： 根据W3Schools： 相对定位的元素通常用作绝对定位元素的容器块。 为什么是这样？有没有很好的例子？ 问题答案： 一个很好的例子是当您想将某些内容放置到页面上或相对于容器/ div放置时。 这向您显示，如果绝对div不在“相对” div内，则内容将与文档主体对齐。 请注意，绿色div（）的div内部（）的对齐方式为的上/右对齐。 蓝色框（）具有与绿色框（）完全相同的HTML布局，但
-
问题内容： 在itext中，我有一个块/短语/段落（我不介意哪个），我想将页面上的其他位置放置在例如300 x 200的位置。我该怎么做？ 问题答案： 最后，我编写了自己的方法。
-
本文向大家介绍说说你对相对定位、绝对定位、固定定位的理解相关面试题，主要包含被问及说说你对相对定位、绝对定位、固定定位的理解时的应答技巧和注意事项，需要的朋友参考一下 https://www.w3schools.com/css/css_positioning.asp https://www.w3school.com.cn/cssref/pr_class_position.asp
-
我是java swing gui的新手，我无法解决这个问题让我们假设我有一个Jframe大小100，100我有4个按钮位置 所有左顶部宽度高度大小从100，100缩放。 我需要使用绝对定位（因为我的真实情况不同的左，顶，宽，高），但响应性我考虑也许我可以使用因子来倍增左，右，宽，高值 编辑 我从不同的服务中得到左顶宽度高度，我的例子可以是这样的
-
问题内容： 我有3个要素。 第一个更大（包装）并具有 第2个相对于第1个相对位置绝对定位（并包含在第1个中） 第3个包含在第2个中，并且也具有绝对定位。 为什么第3个位置相对于第2个绝对位置（这也是第1个位置的绝对位置）而不是相对位置的第一个位置？ 因为3rd 是绝对定位到2nd的绝对定位。 问题答案： 因为就像重置孩子的相对位置一样。 这是无法解决的-如果您希望第三个相对于第一个绝对定位，则必须