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

通常，如果希望元素显示在同一行中，可以将其设置为“显示：内联”。但是，将元素设置为inline意味着width属性将毫无意义

---

如何使div在不内联的情况下位于同一行？

您可以使用

display:inline block

此属性允许DOM元素具有块元素的所有属性，但保持其内联。有一些缺点，但大多数情况下已经足够好了

---

编辑：唯一存在一些问题的现代浏览器是IE7。请参见

您可以使用float:left浮动列div；给它们加宽

为了确保没有其他内容被弄乱，您可以将浮动div包装在父div中，并为其提供一些清晰的浮动样式

希望这能有所帮助。

我使用了这个属性

display: table;

及

为了达到同样的效果，下面的fiddle链接显示了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>

以下是JSFIDLE：

---

我认为这可能对那些希望在同一行中设置div而不使用display inline的人有所帮助。

Flex是更好的方法。试试看

display: flex;

---

您可以在DIV中使用

float:left

，也可以使用

标记，如

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

首先
第二

或

首先
第二

您也可以浮动它们，但这有它自己的一套警告。您可以详细说明其他浏览器中的怪癖吗？我很感兴趣。问题:+1@cctan你可以读更多。基本上，问题在于IE7和IE6只对内联显示的元素应用

inline block

。正如该网站上所解释的，它是可以修复的。@Eric更准确地说，HTML代码中的空白将影响渲染。如果您不想添加额外的空间，请不要在元素之间放置任何空格，也就是说，让它们都粘在同一行HTML代码上。我还必须使用

空白：nowrap

。父div对我来说是固定宽度的，其中5个子div必须显示在一行中，即使它们在右侧溢出。+1这正是我想要的答案。我将我想要并排显示的两个div设置为

display:table cell

，效果非常好。这比float要好得多，因为它不会弄乱任何包装容器，而且您不必

清除：其他任何内容。谢谢我更愿意使用这种方法而不是其他方法！！谢谢。如果您有问题，请使用display:table进行修复，然后您就有2个问题了：/也许可以添加一个关于flex功能的简短描述？
<div style="width:100px;float:left"> First </div> 
<div> Second </div> 
<br/>

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