如何并排放置两个div盒
所以我很难编写代码(大约几周),并且在为我的网站编写代码时遇到了问题.我希望有这样的布局
但无法弄清楚如何并排放置两个盒子(一个盒子将是一个视频解释我的网站,另一个盒子将是一个注册登记表格.)我希望他们彼此相邻,大约一个盒子之间的英寸分隔.
我还需要帮助我的网站的宽度？现在它看起来像标题不适合页面,导致水平滚动.有点像这样
我想要它,以便整个网站看起来像一个大盒子,我想要所有内容的内容.有人可以帮帮我吗？非常感激.先感谢您.
Dan*_*old 59
这很简单:
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>- 谢谢你的帖子! (2认同)
小智 32
这会奏效
<div style="width:800px;">
<div style="width:300px; float:left;"></div>
<div style="width:300px; float:right;"></div>
</div>
- 我刚刚添加<div style ="clear:both;"> </ div>以防止下一个元素浮动 (4认同)
- 内部div没有正确结束.只是未来复制贴纸的注释.:) (2认同)
<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>
- 虽然此代码可能会回答问题，但提供有关 **如何** 和 **为什么** 解决问题的附加上下文将提高答案的长期价值。 (2认同)
我只是并排给出两个响应式 div 的代码
*{
margin: 0;
padding: 0;
}
#parent {
display: flex;
justify-content: space-around;
}
#left {
border: 1px solid lightgray;
background-color: red;
width: 40%;
}
#right {
border: 1px solid lightgray;
background-color: green;
width: 40%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="parent">
<div id="left">
lorem ipsum dolor sit emet
</div>
<div id="right">
lorem ipsum dolor sit emet
</div>
</div>
</body>
</html>小智 1
深入研究一下 CSS 和 HTML，你就会明白这一点。它只是左右浮动框，并且这些框需要位于同一个 div 内。http://www.w3schools.com/html/html_layout.asp可能是一个很好的资源。
- w3schools 应该避免作为资源，他们的很多信息都是不准确的。W3C wiki 是一个不错的选择 http://www.w3.org/wiki/CSS/Training (3认同)