html - 如何使用CSS检测具有2列行的单元格的高度

Question

我尝试构建两个彼此相邻的文本/图像框，其中一个框定义桌面上两个框的高度。在这种情况下，第一个 leftcol 框应该将背景颜色扩展到 rightcol 的大小并将内容居中。在移动设备上，盒子不应该展开，而是在一行中只显示一个盒子。我也需要一些填充来使它看起来不错。这种 padding-right padding-left 的东西让内容分开感觉不对。可能 flexbox 可以处理这个，但我目前不明白。

.leftcol {
    float: left;
    width: 45%;
    padding: 10px 20px 10px 10px;
    background-color: #ff22aa
}
.rightcol {
    float: right;
    width: 45%;
    padding: 10px 10px 10px 20px;
    background-color: #aa4422

}

@media screen and (max-width: 800px) {
    .leftcol, 
    .rightcol, 
    .boxes,
    div.boxes:nth-of-type(even),
    div.boxes:nth-of-type(odd){
        float: none;
        width: auto;
     	padding: 0px;
    }
}

<div class="colgroup">
<div class="leftcol">
<h3>Bal</h3>
<p>blub blub</p>
</div>
<div class="rightcol">
<h3>Bla right</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>

Answer 1

要使用 Flexbox 实现这一点，您可以这样做。

查看 CSS 中的注释

.colgroup {
  display: flex;
  justify-content: space-between;       /*  make a gap between when
                                            aligned side-by-side  */
}

.leftcol {
  flex-basis: calc(50% - 15px);         /*  take of 15px for the gap  */
  background-color: #ff22aa
}

.rightcol {
  flex-basis: calc(50% - 15px);
  background-color: #aa4422
}

@media screen and (max-width: 800px) {
  .colgroup {
    flex-direction: column;             /*  on mobile, stack them vertical instead  */
  }
  .rightcol {
    margin-top: 30px;
  }
}

<div class="colgroup">
  <div class="leftcol">
    <h3>Bal</h3>
    <p>blub blub</p>
  </div>
  <div class="rightcol">
    <h3>Bla right</h3>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
</div>