如何在一行中显示多个div，但仍保留宽度？

74

通常，将元素设置为显示：内联（如果希望它们显示在同一行中）。但是，将元素设置为内联意味着width属性将毫无意义。

如何使div处于同一行而不使它们内联？

css

— 显影剂
source

124

您可以使用display:inline-block。

此属性允许DOM元素具有block元素的所有属性，但保持其内联。有一些缺点，但是大多数时候它已经足够好了。为什么它很好，为什么它可能对您不起作用。

编辑：唯一有一些问题的现代浏览器是IE7。参见Quirksmode.org

— 洛默戈尔
source

您也可以浮动它们，但这附带了一些警告。

— prodigitalson

可以详细说明其他浏览器中的怪癖吗？我有兴趣。问题+1

— cctan 2012年

1

@cctan您可以在此处阅读更多内容。基本上，问题是IE7和IE6仅适用inline-block于内联显示的元素。虽然可以按照该网站上的说明进行修复。

— lomegor

1

@Eric更准确地说，HTML代码中的空格会影响渲染。如果您不想添加额外的空间，则不要在元素之间放置任何空间，也就是说，将所有元素都粘在同一行HTML代码上。

— 凯·卡弗

1

我也必须使用white-space: nowrap。对我来说，父div的宽度是固定的，并且即使子div在右侧溢出，也必须在一行中显示5个子div。

— Rehmat

18

我用的财产

display: table;

和

display: table-cell;

为了达到相同的目的，下面的小提琴的链接显示了3个表包装在div中，这些div被进一步包装在父div中

<div id='content'>
   <div id='div-1'><!-- COntains table --></div>
   <div id='div-2'><!-- contains two more divs that require to be arranged one below other --></div>
</div>

这是jsfiddle：http : //jsfiddle.net/vikikamath/QU6WP/1/ 我认为这对于希望在不使用display-inline的情况下将div设置为同一行的人可能会有所帮助

— 维克拉姆
source

1

+1这正是我想要的答案。我设置了两个要并排显示的div，display:table-cell它非常完美。比浮动好得多，因为它不会与任何包装容器混在一起，而且您也不需要clear:;其他任何东西。谢谢！！

— 安德鲁·福克斯

与其他方法相比，我更喜欢使用这种方法！谢谢。

— 2014年

如果您有问题，请用display：table修复，然后有2个问题：/

— Downgoat

5

Flex是更好的方法。你试一试..

display: flex;

— 阿西莎·约马尔
source

7

也许添加一个简短的说明，关于什么弹性？

— user2589273 '18

3

您可以使用float：left;来浮动列div。并给他们宽度。

并且要确保没有其他内容弄乱，可以将浮动div包裹在父div中，并为其提供清晰的浮动样式。

希望这可以帮助。

— ninty9notout
source

1

您可以在DIV中使用float：left或使用SPAN标签，例如

<div style="width:100px;float:left"> First </div> 
<div> Second </div> 
<br/>

要么

<span style="width:100px;"> First </span> 
<span> Second </span> 
<br/>

— 庄世坤
source