Html 和 CSS 如何并排对齐 3 个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20179154/
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
Html and CSS how can i align 3 divs side by side
提问by user1949387
I have 3 div's, 200px,300px and 200px how can I align them side by side, all the examples I have seen only include 2. I have Div1,Div2 working correctly but Div3 for some reason slides under Div1 lie this picture
我有 3 个 div，200px、300px 和 200px 如何将它们并排对齐，我看到的所有示例都只包含 2 个。我有 Div1、Div2 工作正常但 Div3 由于某种原因在 Div1 下的幻灯片是这张图片
This is my code
这是我的代码
<div style=" border-right:1px solid black; width:200px; float:left; position:relative; ">
//div1
</div>
<div style=" border-right:1px solid black; width:300px; padding:10px;float:left; position:relative;">
//div2
</div>
<div style=" float: left; width: 200px;position:relative">
//div3
</div>
The Div1has the shorter content on it, how can i make the border to the right as long as the border in Div2, thanks for any help.
该Div1构成上有更短的内容，我怎样才能使边境的权利，只要在边境Div2的任何帮助，谢谢。
回答by Matthew Johnson
All the elements in one line
一行中的所有元素
Wrap the divelements in a wrapper:
将div元素包装在包装器中：
<div id="wrapper">
<div id="first">first</div>
<div id="second">second</div>
<div id="third">third</div>
</div>
Then set the width of the wrapper, and float all three divs:
然后设置包装器的宽度，并浮动所有三个div：
#wrapper {
width:700px;
clear:both;
}
#first {
background-color:red;
width:200px;
float:left;
}
#second {
background-color:blue;
width:300px;
float:left;
}
#third {
background-color:#bada55;
width:200px;
float:left;
}
Also, use IDs and/or classes, and keep the CSS separate from the HTML. This makes the code easier to read and maintain.
此外，使用 ID 和/或类，并将 CSS 与 HTML 分开。这使代码更易于阅读和维护。
The fiddle.
的小提琴。
All elements in one line, same height
一行中的所有元素，高度相同
To accomplish the "same height" part, you can use display:table, display:table-row, and display:table-cellto get matching heights. It uses an extra div, so the HTML looks like:
为了实现“同一高度”的一部分，你可以使用display:table，display:table-row以及display:table-cell获得匹配的高度。它使用了一个额外的 div，所以 HTML 看起来像：
<div id="wrapper">
<div id="row">
<div id="first">first</div>
<div id="second">second<br><br></div>
<div id="third">third</div>
</div>
</div>
The floats can then be removed, so the CSS looks like:
然后可以删除浮点数，因此 CSS 如下所示：
#wrapper {
display:table;
width:700px;
}
#row {
display:table-row;
}
#first {
display:table-cell;
background-color:red;
width:200px;
}
#second {
display:table-cell;
background-color:blue;
width:300px;
}
#third {
display:table-cell;
background-color:#bada55;
width:200px;
}
The fiddle.
的小提琴。
The Flexbox Way
弹性盒方式
If you're only supporting newer browsers (IE 10 and up), Flexbox is another good choice. Make sure to prefix for better support. More on the prefixes can be found here.
如果您只支持较新的浏览器（IE 10 及更高版本），Flexbox 是另一个不错的选择。确保前缀以获得更好的支持。可以在此处找到有关前缀的更多信息。
The HTML
HTML
<div class="container">
<div class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="second">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ratione rerum deserunt reiciendis numquam fugit dolor eligendi fuga sit. Hic, tempore. Error, temporibus possimus deserunt quisquam rerum dolor quam natus.Fugiat nam recusandae doloribus culpa obcaecati facere eligendi consectetur cum eveniet quod et, eum, libero esse voluptates. Ut commodi consequuntur eligendi doloremque deserunt modi animi explicabo aperiam, non, quas qui!</div>
<div class="third">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet obcaecati, rem. Ullam quia quae, ad, unde saepe velit incidunt, aliquid eum facere obcaecati molestiae? Repellendus tempore magnam facere, sint similique!</div>
</div>
The CSS
CSS
.container {
display:flex;
justify-content:center;
}
.container > div {
margin:10px;
background-color:#bada55;
}
.first, .third {
width:200px;
}
.second {
width:300px;
}
The Codepen.
该Codepen。
The Grid Way
网格方式
You can accomplish this with gridnow, too, though browser supportmight be an issue if you're supporting older browsers. It's the same HTML as with the flexbox example, with just different CSS:
您现在也可以使用grid来完成此操作，但如果您支持旧浏览器，则浏览器支持可能是一个问题。它与 flexbox 示例的 HTML 相同，只是 CSS 不同：
The CSS
CSS
.container {
display:grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
grid-column-gap: 10px;
width:700px;
}
.container > div {
background-color:#bada55;
}
.first, .third {
width:200px;
}
.second {
width:300px;
}
The codepen.
该codepen。
回答by Dr Amit Sehgal
The HTML code is
HTML代码是
<div id="wrapper">
<div id="first">first</div>
<div id="second">second</div>
<div id="third">third</div>
</div>
The CSS will be
CSS 将是
#wrapper {
display:table;
width:100%;
}
#row {
display:table-row;
}
#first {
display:table-cell;
background-color:red;
width:33%;
}
#second {
display:table-cell;
background-color:blue;
width:33%;
}
#third {
display:table-cell;
background-color:#bada55;
width:34%;
}
This code will workup towards responsive layout as it will resize the
此代码将调整响应式布局，因为它会调整
<div>
according to device width. Even one can silent anyone
根据设备宽度。甚至可以让任何人沉默
<div>
as
作为
<!--<div id="third">third</div> -->
and can use rest two for two
并且可以使用两个休息两个
<div>
side by side.
并排。
