Question

我有以下布局：

<div class="container">
  <div class="row">
    <div class="category">
      <div class="label">Label1: </div><div class="content">Content1</div>
    </div>
    <div class="category">
      <div class="label">Label2: </div><div class="content">Content2</div>
    </div>
  </div>
  <div class="row">
    <div class="category">
      <div class="label">Label3: </div><div class="content">Content3</div>
    </div>
    <div class="category">
      <div class="label">Label4: </div><div class="content">Content4</div>
    </div>
  </div>
</div>

如果它可以适合，我希望每行都有自己的行;但是，如果窗口调整大小或分辨率太低，我希望它转到每个类别的新行。就目前而言，当没有足够的空间时，它只会完全破坏格式化。我的CSS如下：

.container {
    width: 600px;
    background-color: black;
    color: white;
    padding: 4px;
}
.row {
    clear: both;
}
.category {
    width: 300px;
    margin-top: 2px;
    margin-bottom: 2px;
}
.left {
    float: left;
}
.right {
    float: right;
}
.label {
    float: left;
}
.content {
    display: block;
    overflow: hidden;
    color: black;
    background-color: white;
    text-align: center;
}

我的问题是双重的。一：容器不会扩展到内容的垂直尺寸。二：如果将容器宽度向下调整大小，则会使整个过程混乱，而不是根据需要移动到下一行。在实际项目中，容器宽度被指定为主体宽度的％，这显然取决于窗口的大小，因此它需要在其他屏幕上工作。

https://jsfiddle.net/pja7meLd/

Answer 1

背景颜色未延伸以匹配高度，因为您需要清除浮动。但是我会在这些行上使用flexbox，在类别元素中，你可以更好地控制布局，而不需要清除浮动。

.container {
  background-color: black;
  color: white;
  padding: 4px;
}

.row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.category {
  width: 300px;
  margin-top: 2px;
  margin-bottom: 2px;
  display: flex;
}

.content {
  display: block;
  overflow: hidden;
  color: black;
  background-color: white;
  text-align: center;
  flex-grow: 1;
}

<div class="container">
  <div class="row">
    <div class="category ">
      <div class="label">Label1:&nbsp;</div>
      <div class="content">Content1</div>
    </div>
    <div class="category ">
      <div class="label">Label2:&nbsp;</div>
      <div class="content">Content2</div>
    </div>
  </div>
  <div class="row">
    <div class="category ">
      <div class="label">Label3:&nbsp;</div>
      <div class="content">Content3</div>
    </div>
    <div class="category ">
      <div class="label">Label4:&nbsp;</div>
      <div class="content">Content4</div>
    </div>
  </div>
</div>

Answer 2

我能够通过添加到容器并更改.right来获得所需的行为，如下所示：

.container {
  /* (same as above plus the following line) */
  position: absolute;
}
.right {
  float: left;
}

https://jsfiddle.net/pja7meLd/1/

无论使用CSS的浏览器分辨率如何，都能获得正确的内容

2 个答案: