Html 如何在同一行中创建两个 <div>...</div>？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4340971/
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 two <div>...</div> in the same row?
提问by Hyman Ma
I mean, the two tags have the same height.
我的意思是，这两个标签具有相同的高度。
回答by Ives.me
Try this for all divs.
为所有 div 尝试这个。
display:inline-block;
回答by Yuval Adam
Simple: use <span>s instead.
简单：使用<span>s 代替。
<div>by default have display: block, meaning the next element will be on a new line.
<div>默认情况下 have display: block，这意味着下一个元素将在新行上。
You can change them to display: inlineto get the behavior you want. But remember that an inline <div>is just a <span>.
您可以将它们更改为display: inline以获得您想要的行为。但请记住，内联<div>只是一个<span>.
回答by simshaun
Float them with css:
用 css 浮动它们：
float: left
回答by Abraxas
Use a div container and put inside all your divs.
使用 div 容器并将其放入所有 div 中。
.div_container{
display: flex;
flex-direction: row;
}
That easy!
这么简单！
回答by mark_dj
Make them float:
让它们漂浮：
HTML
HTML
<div class="container1"></div>
<div class="container2"></div>
<div class="clear"></div>
CSS
CSS
.clear { clear: both; }
.container1, .container2 { float: left; }
You have to clear the float.. so use clear both :)
你必须清除浮动..所以使用clear both :)
回答by Jose Balboa
Float messes up my page center alignment. Here's what I got, I want to get 2 and 3 on the same row without losing the page centering. Float doesn't work because when I resize the browser,it moves with it.
浮动弄乱了我的页面中心对齐方式。这就是我得到的，我想在同一行上获得 2 和 3，而不会丢失页面居中。Float 不起作用，因为当我调整浏览器的大小时，它会随之移动。
<head>
<meta http-equiv="Content-Language" content="en-us">
<style type="text/css">
.div1 {
background: #faa;
width: 500;
}
.div2 {
background: #ffc;
width: 400;
margin-right: 100px;
}
.div3 {
background: #cfc;
width: 100;
margin-left: 400px;
}
</style>
</head>
<html>
<body>
<center>
<div class="div1"> This is no 1</div>
<div class="div2"> This is no 2</div>
<div class="div3"> This is no 3</div>
</center>
</body>
</html>
