2017-11-11 12 views
0


我想創建四個彼此相鄰的子項。現在,當視口寬度變小時,這些應該會摺疊成兩兩兩格。 (不太重要:當它變得更小時,它們應該是父寬度的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>

+1

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

回答

0

附加height屬性做類.child

+0

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

1

您可以用電網像這樣做:

*{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>

相關問題