Question

我有两个相等的宽度相邻的div。当第一个div中的文本溢出到第二行时，我希望第二个div放在第一个div的下方，加倍每个div的宽度。这在CSS中是否可行？

我尝试过使用flexbox，但我不知道从哪里开始。

＆＃13;

#container {
  display: flex;
  width: 500px;
  border: 1px solid black;
}

.cell {
  flex: 1;
}

＆＃13;

<div id="container">
  <div class="cell" style="background-color:pink;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
  </div>
  <div class="cell" style="background-color:lightblue;">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco
  </div>
</div>

＆＃13;

Answer 1

您可以在容器上转With wb.Sheets("Sheet1").AutoFilter.Range If Not .Rows(2).Hidden Then FiltRng = .Cells(2, 1).Value2 ElseIf .SpecialCells(xlCellTypeVisible).Areas.count > 1 Then FiltRng = .SpecialCells(xlCellTypeVisible).Areas(2).Cells(1, 1).Value2 Else MsgBox "no Cells found" End If If FiltRng Like "*LT*" Then MsgBox "It has LT"，在项目上转flex-wrap: wrap;。（以全屏方式查看片段并调整浏览器宽度）

flex-grow: 1;

#container {
  display: flex;
  border: 1px solid black;
  flex-wrap: wrap;
}

.cell {
  flex-grow:1;
}

Answer 2

我明白了。两个div必须为min-width: 50%，最后一个div必须为flex: 1。父div应该有flex-wrap: wrap。

#container {
    display: flex;
    flex-wrap: wrap;
    width: 500px;
    border: 1px solid black;
}
#cell1 {
    background-color: pink;
    min-width: 50%;
}
#cell2 {
    background-color: lightblue;
    min-width: 50%;
    flex: 1;
}

<div id="container">
    <div id="cell1">
        Lorem ipsum dods Ut eniasdfasdf
    </div>
    <div id="cell2">
        Ut enim ad minim veniam, quis nostrud exercitation ullamco
    </div>
</div>

CSS - 当第一个div溢出时，如何强制第二个div到另一行

2 个答案: