Html 如何将两个div并排放置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15374918/
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 put two divs side by side
提问by Richard Linares
So I'm quite new to writing code (about a few weeks) and I've hit a wall while writing code for my website. I want to have a layout like this:
所以我对编写代码很陌生（大约几周），并且在为我的网站编写代码时遇到了障碍。我想要一个这样的布局：
But I can't figure out how to put the two boxes side by side. One box will be a video explaining my website, while the other box will be a sign up registration form.
I want the boxes to be next to each other, with about an inch of separation between them.
但是我不知道如何将两个盒子并排放置。一个框将是解释我的网站的视频，而另一个框将是注册登记表。我希望这些盒子彼此相邻，它们之间有大约一英寸的间隔。
I also need help with the width of my website's header. Right now it looks like the header doesn't fit on the page, causing a horizontal scroll. Kind of like this:
我还需要有关网站标题宽度的帮助。现在看起来标题不适合页面，导致水平滚动。有点像这样：
I want it so that the entire website is like one big box, and all the content is inside that box. Can someone please help me? Much appreciated. Thank you in advance.
我想让整个网站就像一个大盒子，所有的内容都在那个盒子里。有人可以帮帮我吗？非常感激。先感谢您。
回答by Danilo Kobold
http://jsfiddle.net/kkobold/qMQL5/
http://jsfiddle.net/kkobold/qMQL5/
#header {
width: 100%;
background-color: red;
height: 30px;
}
#container {
width: 300px;
background-color: #ffcc33;
margin: auto;
}
#first {
width: 100px;
float: left;
height: 300px;
background-color: blue;
}
#second {
width: 200px;
float: left;
height: 300px;
background-color: green;
}
#clear {
clear: both;
}<div id="header"></div>
<div id="container">
<div id="first"></div>
<div id="second"></div>
<div id="clear"></div>
</div>回答by Abdelillah SchyZophrény
This will work
这将工作
<div style="width:800px;">
<div style="width:300px; float:left;"></div>
<div style="width:300px; float:right;"></div>
</div>
<div style="clear: both;"></div>
回答by Dostonbek Oripjonov
<div style="display: inline">
<div style="width:80%; display: inline-block; float:left; margin-right: 10px;"></div>
<div style="width: 19%; display: inline-block; border: 1px solid red"></div>
</div>
回答by Dostonbek Oripjonov
Have a look at CSS and HTML in depth you will figure this out. It just floating the boxes left and right and those boxes need to be inside a same div. http://www.w3schools.com/html/html_layout.aspmight be a good resource.
深入了解 CSS 和 HTML，您就会明白这一点。它只是左右浮动框，这些框需要在同一个 div 内。http://www.w3schools.com/html/html_layout.asp可能是一个很好的资源。
回答by Jason Sears
Regarding the width of your website, you'll want to consider using a wrapper class to surround your content (this should help to constrain your element widths and prevent them from expanding too far beyond the content):
关于您网站的宽度，您需要考虑使用包装类来包围您的内容（这应该有助于限制您的元素宽度并防止它们超出内容扩展得太远）：
<style>
.wrapper {
width: 980px;
}
</style>
<body>
<div class="wrapper">
//everything else
</div>
</body>
As far as the content boxes go, I would suggest trying to use
就内容框而言，我建议尝试使用
<style>
.boxes {
display: inline-block;
width: 360px;
height: 360px;
}
#leftBox {
float: left;
}
#rightBox {
float: right;
}
</style>
I would spend some time researching the box-object model and all of the "display" properties. They will be forever helpful. Pay particularly close attention to "inline-block", I use it practically every day.
我会花一些时间研究盒对象模型和所有“显示”属性。他们将永远有帮助。特别关注“inline-block”，我几乎每天都在使用它。
回答by Victor Ifeanyi Ejiogu
This is just a simple(not-responsive) HTML/CSS translation of the wireframe you provided.
这只是您提供的线框的简单（无响应）HTML/CSS 翻译。
HTML
HTML
<div class="container">
<header>
<div class="logo">Logo</div>
<div class="menu">Email/Password</div>
</header>
<div class="first-box">
<p>Video Explaning Site</p>
</div>
<div class="second-box">
<p>Sign up Info</p>
</div>
<footer>
<div>Website Info</div>
</footer>
</div>
CSS
CSS
.container {
width:900px;
height: 150px;
}
header {
width:900px;
float:left;
background: pink;
height: 50px;
}
.logo {
float: left;
padding: 15px
}
.menu {
float: right;
padding: 15px
}
.first-box {
width:300px;
float:left;
background: green;
height: 150px;
margin: 50px
}
.first-box p {
color: #ffffff;
padding-left: 80px;
padding-top: 50px;
}
.second-box {
width:300px;
height: 150px;
float:right;
background: blue;
margin: 50px
}
.second-box p {
color: #ffffff;
padding-left: 110px;
padding-top: 50px;
}
footer {
width:900px;
float:left;
background: black;
height: 50px;
color: #ffffff;
}
footer div {
padding: 15px;
}
回答by prashanth
Based on the layout you gave you can use float left property in css.
根据您提供的布局，您可以在 css 中使用 float left 属性。
HTML
HTML
<div id="header"> LOGO</div>
<div id="wrap">
<div id="box1"></div>
<div id="box2"></div>
<div id="clear"></div>
</div>
<div id="footer">Footer</div>
CSS
CSS
body{
margin:0px;
height: 100%;
}
#header {
background-color: black;
height: 50px;
color: white;
font-size:25px;
}
#wrap {
margin-left:200px;
margin-top:300px;
}
#box1 {
width:200px;
float: left;
height: 300px;
background-color: black;
margin-right: 20px;
}
#box2{
width: 200px;
float: left;
height: 300px;
background-color: blue;
}
#clear {
clear: both;
}
#footer {
width: 100%;
background-color: black;
height: 50px;
margin-top:300px;
color: white;
font-size:25px;
position: absolute;
}
