當窗口變小時，如何讓四個響應孩子變成2×2的網格？

我想創建四個彼此相鄰的子項。現在，當視口寬度變小時，這些應該會摺疊成兩兩兩格。（不太重要：當它變得更小時，它們應該是父寬度的100％。）現在我的問題不是通過媒體查詢來創建這個問題。問題是第一個孩子的身高比第二個孩子的身高高。當他們倒向2×2網格時，第三個孩子總是放在第二個孩子下面，而不是第一個孩子（我想要它）。
我也嘗試過flexbox，但據我所知，沒有可能讓它變成4乘1，2乘2或1乘4.這個問題只發生在一些特定的視口寬度，因爲行數是（在某些情況下）在第一個和第二個孩子中是相等的。
要明白我的意思，這裏是一個片段：當窗口變小時，如何讓四個響應孩子變成2×2的網格？

*{ 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 

 
#parent{ 
 
    width: 960px; 
 
    max-width: 90%; 
 
    font-size: 1rem; 
 
    margin: auto; 
 
    background-color: green; 
 
} 
 

 
.child{ 
 
    width: 23%; 
 
    margin: 0px 1%; 
 
    background-color: yellow; 
 
    float: left; 
 
} 
 

 
@media (max-width: 60rem){ 
 
    .child{ 
 
    width: 46%; 
 
    margin: 2%; 
 
    float: left; 
 
    } 
 
} 
 

 
@media (max-width: 30rem){ 
 
    .child{ 
 
    width: 100%; 
 
    margin: 0; 
 
    float: none; 
 
    } 
 
}

<div id="parent"> 
 
    <div class="child"> 
 
    <h1>Lorem ipsum</h1> 
 
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed</p> 
 
    </div> 
 
    <div class="child"> 
 
    <h1>Lorem ipsum</h1> 
 
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing</p> 
 
    </div> 
 
    <div class="child"> 
 
    <h1>Lorem ipsum</h1> 
 
    <p>Lorem ipsum dolor sit amet, consetetur</p> 
 
    </div> 
 
    <div class="child"> 
 
    <h1>Lorem ipsum</h1> 
 
    <p>Lorem ipsum dolor sit amet</p> 
 
    </div> 
 
</div>

來源

2017-11-11 Bastian Springer

使用內嵌塊代替浮點數。請參閱[DIV以非線性方式浮動]（https://stackoverflow.com/q/47210837/1016716）。 –

附加height屬性做類.child

來源

2017-11-11 13:07:26 Marcin

但問題是添加一個height屬性會使窗口變小（因爲文本中有更多行），這些框就不會採用自定義高度。最小高度也不能完成這項工作，因爲當它太小時它顯然只會使高度變大。 –

您可以用電網像這樣做：

*{padding:0;margin:0;box-sizing:border-box} 
 
html, body {width:100%} 
 

 
#parent { 
 
    display: grid; 
 
    grid-template-columns: repeat(4, 1fr); /* 4 x 25%/can also use 1fr 1fr 1fr 1fr or 25% 25% 25% 25%, without the repeat(); fr stands for fraction */ 
 
    grid-gap: 10px; /* 10px horizontal and vertical gap between child elements */ 
 
    width: 960px; 
 
    max-width: 90%; 
 
    font-size: 1rem; 
 
    margin: auto; 
 
    background: green; 
 
} 
 

 
.child { 
 
    background: yellow; 
 
} 
 

 
@media (max-width: 60rem){ 
 
    #parent { 
 
    grid-template-columns: repeat(2, 1fr); /* 2 x 50%/can also use 1fr 1fr or 50% 50%, without the repeat() */ 
 
    } 
 
} 
 

 
@media (max-width: 30rem){ 
 
    #parent { 
 
    grid-template-columns: 1fr; /* 1 x 100%/can also use 100% */ 
 
    } 
 
}

<div id="parent"> 
 
    <div class="child"> 
 
    <h1>Lorem ipsum</h1> 
 
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed</p> 
 
    </div> 
 
    <div class="child"> 
 
    <h1>Lorem ipsum</h1> 
 
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing</p> 
 
    </div> 
 
    <div class="child"> 
 
    <h1>Lorem ipsum</h1> 
 
    <p>Lorem ipsum dolor sit amet, consetetur</p> 
 
    </div> 
 
    <div class="child"> 
 
    <h1>Lorem ipsum</h1> 
 
    <p>Lorem ipsum dolor sit amet</p> 
 
    </div> 
 
</div>

來源

2017-11-11 14:57:38 VXp

當窗口變小時，如何讓四個響應孩子變成2×2的網格？

回答

相關問題