浮动段落宽度未定义

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

在下面的解决方案中，我用 <div class="row"> 包装行，并使用 display: flex; flex-wrap: wrap; 代替 parent #container。 .row 也是柔性的，并且具有 justify-content: space-between 以确保它与 children 之间的距离尽可能大。我还将 #a、#b 和 #c 参数 width 更改为 min-width，因此 flexbox 会尊重它。

如果你是 flexbox 的新手，我推荐 this guide。

#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;
}

<div id="container">
  <div class="row">
    <div id="a"></div>
    <div id="b"></div>
  </div>
  <div class="row">
    <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>
</div>

浮动段落宽度未定义

Float paragraph with undefined width

css

css-float