浮动段落未定义宽度

Question

我有一个div，其中包含标记为1、2、3和4的四个元素，如下图所示，其中＃4是唯一一个未定义高度和宽度的元素。我希望＃2浮动在＃1的右侧，＃4浮动在＃3的右侧，但是＃4只是位于＃3的下方，而不是它的右侧。我创建了一个图表来说明我的意图。

#container {
  width: 300px;
  height: 200px;
  padding:20px;
  background-color: #ff6666;
}

#a {
  margin:10px;
  width: 80px;
  height: 80px;
  float: left;
  background-color: #14165b;
}

#b {
  margin:10px;
  width: 80px;
  height: 80px;
  float: right;
  background-color: #14165b;
}

#c {
  margin:10px;
  width: 80px;
  height: 80px;
  float: left;
  clear:left;
  background-color: #14165b;
}

#d {
  margin:10px;
  padding:10px;
  float: right;
  background-color: #9536ff;
  font-size: 12px;
  color: white;
}

<div id="container">
  <div id="a"></div>
  <div id="b"></div>
  <div id="c"></div>
  <p id="d">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

图

Answer 1

在以下解决方案中，我用asm包装行，并将<div class="row">用作父display: flex; flex-wrap: wrap;。 #container也是灵活的，并具有.row以确保其子级之间的距离尽可能大。我也将justify-content: space-between，#a和#b参数#c更改为width，因此flexbox会尊重这一点。

如果您是Flexbox的新手，我建议this guide。

min-width

#container {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  height: 200px;
  padding: 20px;
  background-color: #ff6666;
}

.row {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

#a {
  margin: 10px;
  width: 80px;
  height: 80px;
  float: left;
  background-color: #14165b;
}

#b {
  margin: 10px;
  width: 80px;
  height: 80px;
  float: right;
  background-color: #14165b;
}

#c {
  margin: 10px;
  min-width: 80px;
  height: 80px;
  float: left;
  clear: left;
  background-color: #14165b;
}

#d {
  margin: 10px;
  padding: 10px;
  float: right;
  background-color: #9536ff;
  font-size: 12px;
  color: white;
}