CSS 如何在一行中显示多个div但仍保留宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8920247/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make multiple divs display in one line but still retain width?
提问by developarvin
Normally, you set elements to display: inline if you want them to display in the same line. However setting an element to inline means that the width attribute would be meaningless.
通常，您将元素设置为 display: inline 如果您希望它们显示在同一行中。然而，将元素设置为内联意味着宽度属性将毫无意义。
How do you make divs to be in the same line without making them inline?
你如何使 div 在同一行而不使它们内联？
回答by lomegor
You can use display:inline-block.
您可以使用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.
此属性允许 DOM 元素具有块元素的所有属性，但保持内联。有一些缺点，但大多数时候它已经足够了。为什么它很好，为什么它可能不适合你。
EDIT:The only modernbrowser that has some problems with it is IE7. See Quirksmode.org
编辑：唯一有问题的现代浏览器是 IE7。见Quirksmode.org
回答by Vikram
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
为了实现相同的效果。下面的小提琴链接显示了 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>
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
这是 jsfiddle：http: //jsfiddle.net/vikikamath/QU6WP/1/我认为这可能对希望在同一行中设置 div 而不使用 display-inline 的人有所帮助
回答by Asitha Yomal
Flex is the better way. Just try..
Flex 是更好的方法。你试一试..
display: flex;
回答by ninty9notout
You can float your column divs using float: left; and give them widths.
您可以使用 float: left; 浮动列 div。并给它们宽度。
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.
并确保您的其他内容不会被弄乱，您可以将浮动的 div 包装在父 div 中，并为其提供一些清晰的浮动样式。
Hope this helps.
希望这可以帮助。
回答by u8769058
You can use float:left in DIV or use SPAN tag, like
您可以在 DIV 中使用 float:left 或使用 SPAN 标签，例如
<div style="width:100px;float:left"> First </div>
<div> Second </div>
<br/>
or
或者
<span style="width:100px;"> First </span>
<span> Second </span>
<br/>
