我无法将 2 个 div 并排放入包装器中。我已经阅读了有关如何并排放置 2 个 div 的现有问题和文章;看起来很简单,只需为两个 div 定义 width 和 float:left 即可。但是,我无法让它工作!
如有任何帮助,我们将不胜感激,谢谢! :)
这是 JSFiddle:https://jsfiddle.net/Toppoki/7pazLwLs/23/
HTML:
<div class="child1">
<div class="wrapper">
<div class="blurb">
</div>
<div class="form">
</div>
</div>
</div>
CSS:
.child1 {
background:#082a46;
margin:0;
}
.wrapper {
width:970px;
margin: 0 auto;
}
.blurb {
color: #fff;
width:200px;
height:400px;
float:left;
}
.form{
background-color:#9c0b0e;
width:100px;
height:400px;
float:left;
}
最佳答案
它已经适用于您显示的代码片段。我只是在 div.form
上添加了背景颜色,以便您可以看到。
在 jsfiddle 的示例中,div.blurb
缺少 float:left
,并且有很多事情会让您感到困惑。
开始删除一些占位符文本以及不必要的元素和样式。开始使其变得非常简单,缩进良好,然后一次添加一种样式。它最终会起作用。
.child1 {
background:#082a46;
margin:0;
}
.wrapper {
border: 1px solid #ccc;
width:970px;
margin: 0 auto;
}
.blurb {
color: #fff;
width:200px;
background-color: blue;
height:400px;
float:left;
}
.form{
background-color:#9c0b0e;
width:100px;
height:400px;
float:left;
}
<div class="child1">
<div class="wrapper">
<div class="blurb">
</div>
<div class="form">
</div>
</div>
</div>
关于html - 在包装器中并排放置 2 个 div 时遇到问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37756503/