欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

使所有flex box子對(duì)象采用最高子對(duì)象的高度

CSS

這是我的flex box UL:

ul {
    box-sizing: border-box;
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    max-width: 1159px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap:25px;
}

還有那個(gè)李的:

ul>li {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    flex-basis: calc((100% - 50px) * 0.333333);
    border-radius: 35px;
    position:relative;
}

我有一些行，每行包含3個(gè)li，在每一行中，所有的li都有該行中最高的li的高度，這取決于它的內(nèi)容有多大。問題是，這個(gè)高度并不保留在第二/第三/等等行上，例如，第二行上的所有l(wèi)i都將具有第二行上最高li的高度，但是沒有什么可以確保這與第一行的最大高度一致。我想讓所有的李，不管他們的內(nèi)容和排在第幾，都有整個(gè)列表中最高的李的高度，不管它有多大。我想只用css和使用flexbox(不是css網(wǎng)格)來完成這個(gè)任務(wù)。這可能嗎？

我嘗試了高度:自動(dòng)或?qū)R自我:拉伸或?qū)R內(nèi)容:拉伸`，似乎沒有工作。不過，我想確定一下。

這就是使用flexbox的方法:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.col-container {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}
.col {
  flex: 1;
  padding: 16px;
}
</style>
</head>
<body>    
<h2>Equal Height Columns with Flexbox</h2>
<p>Make the columns match the height of the tallest column.</p>    
<div class="col-container">
  <div class="col" style="background:orange">
    <h2>Column 1</h2>
    <p>Hello World</p>
  </div>    
  <div class="col" style="background:yellow">
    <h2>Column 2</h2>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
  </div>    
  <div class="col" style="background:orange">
    <h2>Column 3</h2>
    <p>Some other text..</p>
    <p>Some other text..</p>
  </div>
</div>    
</body>
</html>

出發(fā)地:https://www.w3schools.com/howto/howto_css_equal_height.asp(最后一個(gè)選擇；柔性包裝是我添加的)。