5

我想要一些 div 从它们的内容中获取它们的宽度。Display:inline-block 可以做到这一点，但我也希望 div 在彼此下方，而不是像浮动一样彼此相邻。

使用 float:left 而不是 inline-block 可以做到这一点，但我希望 div 居中对齐，而不是左对齐。我怎样才能做到这一点？

4

4 回答 4

7

在父 div 上放置 white-space: pre-line; 在子 div 上添加 clear : both

#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>

http://jsfiddle.net/judsonmusic/8HCWp/

于 2013-05-29T05:03:36.337 回答
3

工作 jsFiddle 演示

考虑以下标记：

<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;
}
于 2013-05-29T05:06:25.490 回答
0

正如在这个线程中提到的，这个问题还有一个灵活的解决方案：

#container > p {
  border-bottom: 2px solid black;
}
    
#container {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
}
<div id="container">
  <p>A text</p>
  <p>A text</p>
  <p>A longer text</p>
</div>

于 2018-05-18T16:33:15.087 回答
-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;
   }

在http://jsfiddle.net/xupHN/检查演示

于 2013-05-29T05:02:21.867 回答