CSS：显示：内联块和定位：绝对
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5042467/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: display:inline-block and positioning:absolute
提问by geronimo
Please consider the following code:
请考虑以下代码：
<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>
The element with absolute positioning apparantly makes the containing box "forget" which height he needs.
具有绝对定位的元素显然使包含框“忘记”他需要哪个高度。
I need the absolute positioning inside the "section" box, is there another solution for this?
我需要“部分”框内的绝对定位，是否有其他解决方案？
thanks in advance, geronimo
提前致谢，geronimo
edit
编辑
Using tables is not really an option, I need some sort of "multi-level"/"nested" layout, where the second col is always on the same position:
使用表格并不是一个真正的选择，我需要某种“多级”/“嵌套”布局，其中第二个列始终位于同一位置：
| 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 course whithout the "|"s)
（当然没有“|”）
回答by Spudley
When you use position:absolute;, the element is taken out of the normal page flow. Therefore it no longer affects the layout of its container element. So the container element does not take into account its height, so if there's nothing else to set the height, then the container will be zero height.
当您使用 时position:absolute;，该元素被从正常的页面流中取出。因此它不再影响其容器元素的布局。所以容器元素并没有考虑到它的高度，所以如果没有其他东西可以设置高度，那么容器的高度就会为零。
Additionally, setting display:inline-block;does not make any sense for an element that is position:absolute;. Again, this is because absolute positioning takes the element out of the page flow. This is at odds with inline-block, which only exists to affect how the element fits into the page flow. All elements that are position:absolute;are automatically treated as display:block, since that's the only logical display mode for absolute positioning.
此外，设置display:inline-block;对于position:absolute;. 同样，这是因为绝对定位将元素从页面流中移除。这与 不一致inline-block，它的存在只是为了影响元素如何适应页面流。所有position:absolute;被自动视为 的元素display:block，因为这是绝对定位的唯一逻辑显示模式。
If you needabsolute positioning, then the only solution to your height problem is to set the height of the container box.
如果您需要绝对定位，那么解决您的高度问题的唯一方法就是设置容器框的高度。
However, I suspect that you could do without the absolute positioning.
但是，我怀疑您可以不用绝对定位。
It looks like what you're trying to do is position the second <span>in each block to a fixed position in the block, so that they line up.
看起来您要做的是将<span>每个块中的第二个定位到块中的固定位置，以便它们对齐。
This is a classic CSS problem. In the "bad-old-days", web designers would have done it using a table, with fixed widths on the table cells. This obviously isn't the answer for today's web designers, but it is something that causes a lot of questions.
这是一个经典的 CSS 问题。在“糟糕的过去”，网页设计师会使用表格来完成它，表格单元格的宽度固定。这显然不是当今网页设计师的答案，但它会引起很多问题。
There are a number of ways to do it using CSS.
使用 CSS 有多种方法可以做到这一点。
The easiest is to set both the <span>elements to display:inline-block;, and give them both a fixed width.
最简单的方法是将两个<span>元素都设置为display:inline-block;，并给它们一个固定的宽度。
eg:
例如：
<div class='section'>
<span class="element-left">some text</span>
<span class="element-right">some text</span>
</div>
with the following CSS:
使用以下 CSS：
.section span {display:inline-block;}
.element-left {width:200px;}
.element-right {width:150px;}
[EDIT]after question has been updated
[编辑]问题更新后
Here's how I would achieve what you're asking now:
以下是我将如何实现您现在的要求：
<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>
with the following CSS:
使用以下 CSS：
.section span {display:inline-block;}
.element-left {width:200px;}
.indent-1 {padding:10px;}
.indent-2 {padding:20px;}
.element-right {width:150px;}
A small amount of extra markup, but it does achieve the effect you want.
少量的额外标记，但确实达到了你想要的效果。
回答by J V
No.
不。
You could position absolutely then have a copy of the element inside the section box with visible: nonebut absolute positioning by definition makes it a "floating" element that doesn't interact with elements above it.
您可以绝对定位，然后在节框内拥有元素的副本，visible: none但根据定义绝对定位使其成为不与其上方元素交互的“浮动”元素。
Assuming your page layout is fixed you could use padding-left: #px;to achieve your goal, as I don't think relative positioning is what you want.
假设您的页面布局是固定的，您可以使用它padding-left: #px;来实现您的目标，因为我认为相对定位不是您想要的。
Alternatively, you could use display: table-*to force it to retain a stricter form without affecting the document structure as shown here
或者，你可以使用display: table-*强制它保留了严格的形式，而不会影响如图所示的文档结构在这里
However depending on whether you want the cells to be fluid you may need to alter the .sectiondivs into display: table-rowif you don't like a predetermined width setup and want the separate .section's to line up.
但是，根据您是否希望单元格流动，如果您不喜欢预定的宽度设置并希望单独的 .section 对齐，则可能需要将.sectiondiv更改为display: table-row。
回答by Twmprys
This can in fact be done easily and simply with divs. You just need to place a div with position:relative inside the inline or block display div. Set its width and height to the same as the containing div. You will then find you can position another div absolutely inside it.
这实际上可以通过 div 轻松简单地完成。您只需要在内联或块显示 div 内放置一个带有 position:relative 的 div。将其宽度和高度设置为与包含的 div 相同。然后你会发现你可以在其中绝对放置另一个 div。
