2
最初は左上に、2番目は右上に、3番目は左下に、4番目は左下に表示したいとします。記事全体のブラウザの高さを占める方法を許可する方法
は、現在、それは次のように表示されます。Output
しかし、それは完全な高さを取っていません。私は上の2つの記事を高さの50％、残りの50％を下の記事に表示したい。
body {
height: 100%;
padding: 0;
margin: 0;
}
article:first-child {
height: 50%;
width: 50%;
float: left;
position: static;
background-color: red;
}
article:nth-child(2){
height: 50%;
width: 50%;
float: left;
position: static;
background-color: yellow;
}
article:nth-child(3){
height: 50%;
width: 50%;
float: left;
position: static;
background-color: green;
}
article:nth-child(4){
height: 50%;
width: 50%;
float: left;
position: static;
background-color: blue;
}<article>First</article>
<article>Second</article>
<article>third</article>
<article>fourth</article>