2
私は写真でこのレイアウトを取得しようとしていますが、DIVタグがCSSルールに従わないようです。 問題は私がパーセンテージで設定しようとしているからです。画面のサイズに合わせてこのレイアウトが必要です。私はスクロールを表示したくない。また、モニタを横向きにしても、レイアウトに従います。DIVはCSSルールに従っていません。何か案は？
#one {
height: 20%;
width: 45%;
background-color: #66F;
float: left;
}
#two {
background-color: #FC3;
height: 40%;
width: 45%;
float: right;
}
#three {
background-color: #0CC;
float: left;
height: 20%;
width: 45%;
}
#four {
background-color: #CF3;
height: 10%;
width: 80%;
float: left;
margin-right: 10%;
margin-left: 10%;
}
#five {
background-color: #F06;
float: left;
height: 40%;
width: 45%;
}
#six {
background-color: #9C0;
float: right;
height: 20%;
width: 45%;
}
#seven {
background-color: #3FF;
float: right;
height: 20%;
width: 45%;
}
#eight {
background-color: #396;
height: 10%;
width: 80%;
margin-right: 10%;
margin-left: 10%;
}<body>
<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>
<div id="four">four</div>
<br>
<div id="five">five</div>
<div id="six">Six</div>
<div id="seven">Seven</div>
<div id="eight">Content for id "eight" Goes Here</div>
</body>任意のヘルプ？
私はあなたのためにこれを作るつもりはありません。私はあなたがそれをやる方法を学びたいと思う。私の提案は、このレイアウトを最初に行のために考え、4つのdivのセクションをラップし、幅を100％に設定します。試してみてください。 – Baro
高さ（％）は、親の高さが指定されている場合、少なくともその高さのパーセンテージを意味します。ですから、画面の高さの割合が必要な場合は、 'html、body {height：100％}'を追加する必要があります。それで全部です。 –