Question

我无法在包装器中并排放置2个div。我已经阅读了关于如何并排放置2个div的现有问题和文章;看起来很简单，只需为两个div定义宽度和浮点数：左。但是，我无法让它发挥作用！

任何帮助将不胜感激，谢谢！：）

这是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;
}

Answer 1

它已经为您展示的代码段工作了。我只是在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>

Answer 2

您还可以在两个div上使用ActionClass并排放置2个div。

（如果您希望它具有响应性，请使用display:inline-block而不是像素来定义孩子的宽度。）

＆＃13;

.child1 {
  background:#082a46;
}

.wrapper {
  border: 1px solid #ccc;
}

.blurb {
  color: #fff;
  background-color: blue;
  width:200px;
  height:400px;
  display:inline-block;
}

.form{
  background-color:#9c0b0e;
  width:100px;
  height:400px;
  display:inline-block;
}

＆＃13;

无法在包装中并排放置2个div

2 个答案: