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

小开

最佳答案

You can use display:inline-block.

This property allows a DOM element to have all the attributes of a block element, but keeping it inline. There's some drawbacks, but most of the time it's good enough. Why it's good and why it may not work for you.

EDIT: The only modern browser that has some problems with it is IE7. See Quirksmode.org

小开

You can float your column divs using float: left; and give them widths.

And to make sure none of your other content gets messed up, you can wrap the floated divs within a parent div and give it some clear float styling.

Hope this helps.

小开

I used the property

display: table;

and

display: table-cell;

to achieve the same.Link to fiddle below shows 3 tables wrapped in divs and these divs are further wrapped in a parent 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>

Here is the jsfiddle: http://jsfiddle.net/vikikamath/QU6WP/1/ I thought this might be helpful to someone looking to set divs in same line without using display-inline.

小开

Flex is the better way. Just try..

display: flex;

小开

You can use float:left in DIV or use <span> tag, like

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

or

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