HTML/CSSレイアウトのお問い合わせ

Question

私はそれをテストするたびに私のために。

ご協力いただければ幸いです！

よろしく

Answer 1

これは、bodyタグ内の基本的なHTMLです：

<div id="navbar"> 
</div> 
<div id="textbox"> 
</div> 
<div id="lmodule"> 
</div> 
<div id="rmodule"> 
</div> 

これはあなた専用のCSSファイルで、あなたのCSSです。

#navbar { 
width: 100%; 
height: auto; (or if you have specific height put it) 
(position: fixed; - use this if you want your menu to stay with the viewer upon moving up/down the page) 
} 
#textbox { 
width: 60%; (based on your image I believe it is around 60%) 
height: auto; 
position: relative; 
margin: 0 auto; 
} 
#lmodule { 
display: inline-box; 
width: 27%; 
height: auto; 
float: left; 
margin: 0 3% 0 auto; 
} 
#rmodule { 
display: inline-box; 
width: 27%; 
height: auto; 
float: right; 
margin: 0 auto 0 3%; 
} 

これは少なくとも私のやり方です。この方法でメディアクエリを作成するのは簡単なので、％ベースの値を使用します。