将 div 宽度设置为没有内联块的内容答案

【问题标题】：set div width to content without inline-block将 div 宽度设置为没有内联块的内容
【发布时间】：2013-05-29 12:45:47
【问题描述】：

我想将 div 的宽度设置为其内容并将 div 保持在彼此之下。使用display:inline-block 可以有效地将 div 彼此相邻浮动。我该怎么做？

【问题讨论】：

在其中插入<br />？
只需删除内联块。或者将它们设置为宽度：100%
使用 display:block;宽度：100%
虽然 BR 标记可以工作，但这不是一个好方法，因为无法确定 BR 将在浏览器之间引起的行间距或填充量。 Clear:both 是本例中的语义 CSS 解决方案。

标签： css

【解决方案1】：

考虑以下标记：

<div class="text">apple</div>
<div class="text">banana</div>
<div class="text">kiwi</div>
<div class="text">orange</div>

浮动并清除所有内容，这是 CSS：

.text {
    background: yellow;
    float: left;
    margin-bottom: 3px;
    clear: both;
}

【讨论】：

这个问题的发帖人希望显示内联属性，因此希望框是其内容的大小。他们应该只需要使用 clear both。
@JudsonTerrell 如何将block 元素的width 设置为其中内容的宽度？您必须明确地将其设为inline 或inline-block，或将其设为float，或将其position 更改为absolute。如果它们不浮动，那么清晰是无用的。
我的意思是与内联块一起。另一种选择是在它们之间放置一个 div，只清除两者。
@JudsonTerrell float 属性不会对 inline-block 元素做任何事情。

【解决方案2】：

说清楚：这两个都可以防止它们浮动，是的，您确实需要浮动“某物”

#div1, #div2{

    display: inline;
    float: left;
    clear: both;
    border: 1px solid grey;

}

<div id="div1">some content here that is bigger</div>
<div id="div2">some content here</div>

【讨论】：

是的，NOX 的解决方案可以在不使用 inline-block 的情况下将 div 宽度设置为内容。
嗯...如果我想让 div 居中对齐怎么办？我会发布另一个问题...
见stackoverflow.com/questions/16805802/…