如何使多个div显示在一行但仍保持宽度？

Question

通常,您将要显示的元素设置为:内联,如果您希望它们显示在同一行中.但是,将元素设置为内联意味着width属性将毫无意义.

你怎么让div在同一行而不让它们内联？

Answer 1

你可以用display:inline-block.

此属性允许DOM元素具有块元素的所有属性,但保持其内联.有一些缺点,但大多数时候它足够好.为什么它很好,为什么它可能不适合你.

编辑:唯一有问题的现代浏览器是IE7.见Quirksmode.org

Answer 2

我用了这个属性

display: table;

和

display: table-cell;

实现相同.下面的小提琴链接显示包含在div中的3个表格,这些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的人有所帮助

Answer 3

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

display: flex;

Answer 4

您可以float:left在 DIV 中使用或使用<span>标签，例如

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

或者

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