CSS：display：inline-block和positioning：absolute [英] CSS: display:inline-block and positioning:absolute
问题描述
请考虑以下代码：
< html xmlns =http://www.w3.org/1999 / xhtmlxml：lang =enlang =en>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8>
< style type =text / css>
.section {
display：block;
width：200px;
border：1px
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>一些文字< / span>
< span class =element-right-a>一些文字< / span>
< / div>
< div class =section>
< span class =element-left>一些文字< / span>
< span class =element-right-a>一些更多的文字强制换行< / span>
< / div>
< div class =section>
< span class =element-left>一些文字< / span>
< span class =element-right-b>一些文字< / span>
< / div>
< div class =section>
< span class =element-left>一些文字< / span>
< span class =element-right-b>一些更强力换行的文字< / span>
< / div>
< div class =section>
< span class =element-left>一些文字< / span>
< span class =element-right-b>一些更强力换行的文字< / span>
< / div>
< / body>
< / html>
具有绝对定位的元素会使包含框忘记需要的高度。
我需要在section框中的绝对定位，是否有另一种解决方案？
geronimo
编辑
使用表格不是一个选项，我需要某种多层次/嵌套布局，其中第二个col总是在相同的位置：
|第一列中的一些文本|第二列中的一些文本
|一些缩进文本|第二列
|也缩进|第二栏
|甚至更多缩进|第二列有很多文本
|使它换
|文本| ...
| blah blah | ...
b >解决方案
当使用 position：absolute; 时，元素被从正常页面流中取出。因此，它不再影响其容器元素的布局。因此，容器元素不会考虑其高度，因此如果没有其他设置高度，则容器将为零高度。
此外，设置 display：inline-block; 对于 position：absolute; 的元素没有任何意义。同样，这是因为绝对定位使元素退出页面流。这与 inline-block 不同，后者仅用于影响元素如何适应页面流。所有 position：absolute; 的元素将被自动视为 display：block ，因为这是唯一的逻辑显示模式绝对定位。
如果你需要绝对定位，那么你的高度问题的唯一解决方案是设置容器框的高度。 / p>
但是，我怀疑你可以没有绝对定位。
看起来像你想要的要做的是将每个块中的第二个< span> 定位到块中的固定位置，以便它们排成一行。
这是一个经典的CSS问题。在不好的日子，网页设计师会使用表格，在表格单元格上有固定的宽度。这显然不是今天的网页设计师的答案，但它是导致很多问题的东西。
有很多方法使用CSS。
最简单的是将< span> 元素设置为 display：inline -block; ，并给它们两个固定宽度。
例如：
< div class ='section'>
< span class =element-left>一些文字< / span>
< span class =element-right>一些文字< / span>
< / div>
使用以下CSS：
.section span {display：inline-block;}
.element-left {width：200px;}
.element-right {width：150px;} $ b $
$ b b $ b 这里是我现在要实现的：
< div class ='section' >
< span class =element-left>< span class ='indent-0'>一些文字< / span>< / span&
< span class =element-right>一些文字< / span>
< / div>
< div class ='section'>
< span class =element-left>< span class ='indent-1'>一些文字< / span>< / span&
< span class =element-right>一些文字< / span>
< / div>
< div class ='section'>
< span class =element-left>< span class ='indent-2'>一些文字< / span>< / span&
< span class =element-right>一些文字< / span>
< / div>
使用以下CSS：
.section span {display：inline-block;}
.element-left {width：200px;}
.indent-1 {padding：10px;}
.indent-2 {padding：20px;}
.element-right {width：150px;}
$ b b
少量额外的标记，但它确实达到你想要的效果。
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
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)
解决方案 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.
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.
If you need absolute 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.
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.
There are a number of ways to do it using CSS.
The easiest is to set both the <span> elements to display:inline-block;, and give them both a fixed width.
eg:
<div class='section'>
<span class="element-left">some text</span>
<span class="element-right">some text</span>
</div>
with the following 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:
.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.
这篇关于CSS：display：inline-block和positioning：absolute的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
