Html 如何在同一行显示3个框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3639907/
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 display 3 boxes in the same line?
提问by Sarthak Srivastava
I am trying to design a page using CSS and I need to display three boxes in the same line.
我正在尝试使用 CSS 设计一个页面，我需要在同一行中显示三个框。
I used three div's and have added float:leftto the first, margin-left:8cm;to the center and float:rightto the right.
我使用了三个 div，并添加float:left到第一个、margin-left:8cm;中心和float:right右侧。
The left and center box are perfectly displayed but the right one goes to the next line. I even tried adding margin-left:16cm;, it still goes down by a line.
左边和中间的框完美显示，但右边的会转到下一行。我什至尝试添加margin-left:16cm;，它仍然下降了一行。
Can someone help?
有人可以帮忙吗？
回答by Guffa
Simply use float:left;on all three elements, and they will line up next to each other.
只需float:left;在所有三个元素上使用，它们就会彼此相邻排列。
回答by Ezequiel Muns
An alternative that does not mess with your markup, and does not require a margin that depends on the other divs' width is to float the first two divs left, and float the last right. So long as the added widths of the divs fits within the parent element it should display as three columns.
另一种不会干扰您的标记，并且不需要取决于其他 div 宽度的边距的替代方法是浮动前两个 div left，并浮动最后一个right。只要 div 的添加宽度适合父元素，它就应该显示为三列。
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
#one, #two, #three { width: 33.3%; }
#one, #two { float: left; }
#three { float: right; clear: none; }
The clear:nonein the third div makes this work in IE 6 & 7.
该clear:none在第三DIV使得IE 6＆7这项工作。
回答by Franci Penov
float:rightfloats the block element right of the nextblock element, not the previous one.
float:right浮动块元素右侧的下一个块元素，而不是前一个。
If you want to preserve the order of the <div>elements in your DOM, you should set both the first and the second as float:leftand set the left margin of the third one to accomodate for the space taken by the first two.
如果您想保留<div>DOM 中元素的顺序，您应该将第一个和第二个都设置为 asfloat:left并设置第三个的左边距以适应前两个所占用的空间。
Alternatively, you can put the <div>elements in first, third, second order and keep your current styles.
或者，您可以将<div>元素按第一、第三、第二顺序排列并保留当前样式。
回答by sukanya mohan
<html>
<head>
<style>
.outer{
padding-top: 4%;
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
}
.box{
display: inline-block;
padding: 5%;
background-color: black;
}
</style>
</head>
<body>
<div class="outer">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
回答by user12441049
.whateveritiscalled {
display: inline-block;
}just simply
只是简单地
