Question

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

如何让div在同一行中而不使它们内联？

Answer 1

您可以使用display:inline-block。

此属性允许DOM元素具有块元素的所有属性，但保持其内联。有一些缺点，但大多数时候它足够好。 Why it's good and why it may not work for you.

编辑：唯一存在问题的现代浏览器是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。并给他们宽度。

为了确保你的其他内容都没有搞砸，你可以将浮动的div包装在父div中并给它一些清晰的浮动样式。

希望这有帮助。

Answer 5

您可以在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/>

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

5 个答案: