我想要一些div来从他们的内容中获取他们的宽度。显示:内联块执行此操作,但我也希望div在彼此之下,而不是彼此相邻,因为浮动。
使用float:left而不是inline-block可以做到这一点,但是我希望div是中心对齐的,而不是左对齐。我怎么能这样做?
答案 0 :(得分:7)
#wrapper{ text-align: center; white-space: pre-line; }
#div1, #div2{
display: inline-block;
clear: both;
border: 1px solid grey;
margin: 3px auto 3px auto;
width: auto;
}
<div id="wrapper">
<div id="div1" class="clearfix">some content here that is bigger</div>
<div id="div2" class="clearfix">some content here</div>
</div>
答案 1 :(得分:3)
考虑以下标记:
<div class="container">
<div class="text">apple</div>
<div class="text">banana</div>
<div class="text">kiwi</div>
<div class="text">orange</div>
</div>
因为您想要align
您的元素,您必须使用inline
,然后我们才会中断
他们与:after
:
.container {
text-align: center;
}
.text {
background: yellow;
display: inline;
}
.text:after {
content: '';
display: block;
}
答案 2 :(得分:0)
正如前面提到的in this thread,这也解决了这个问题:
<div id="container">
<p>A text</p>
<p>A text</p>
<p>A longer text</p>
</div>
&#13;
trickle -u 2500 -d 2500 a.out
&#13;
答案 3 :(得分:-2)
html是
<div>
abc <div style="margin:4px auto;width:100px;">div1</div><br/>
abc <div style="margin:4px auto;width:100px;">div1</div><br/>
abc <div style="margin:4px auto;width:100px;">div1</div><br/>
abc <div style="margin:4px auto;width:100px;">div1</div><br/>
</div>
和样式表是
div{
border:1px solid;
padding:10px;
display:inline-block;
}
检查演示