Question

我尝试在彼此旁边构建两个文本/图像框，其中一个框定义桌面上两者的高度。在这种情况下，第一个leftcol框应该将背景颜色扩展为rightcol的大小并使内容居中。在移动设备上，框不应该展开，只需在一行中显示一个框。我也需要一些填充来使这看起来很好。这个填充右边填充左边的东西感觉错误，让内容分开。可能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>

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

1 个答案: