Question

我一直在寻找一种方法将div放在彼此旁边，找到一个“有效”但有问题的方法

float: left;

它工作了！但它也将它们从父div中弹出，看起来很傻。父母div的背景不再关心它们。

如何在另一个div中并排放置两个div？

Answer 1

删除你的浮动并尝试：

display: inline-block;

Answer 2

浮动元素通常不会影响其父级的大小。您可以通过更改父级的overflow样式来更改此项。

示例：

＆＃13;

.parent { background: red; overflow: hidden; }
.child { float: left; margin: 5px; background: yellow; }

＆＃13;

<div class="parent">
  <div class="child">child 1</div>
  <div class="child">child 2</div>
  <div class="child">child 3</div>
</div>

＆＃13;

Answer 3

防止浮动的块出现＆＃34;弹出＆＃34;在父容器中，您需要触发块格式化上下文，您可以通过指定：

来执行此操作

overflow: auto

表示父容器。

＆＃13;

.wrap {
  border: 1px dotted gray;
  background-color: beige;
  overflow: auto;
}
.wrap div {
  float: left;
  width: 200px;
  height: 200px;
  border: 1px dotted blue;
  margin: 10px;
}

＆＃13;

<div class="wrap">
  <div>One</div>
  <div>Two</div>
</div>

＆＃13;

将<div> s彼此相邻</div>

3 个答案: