■float + clear属性で水平レイアウトを構成する
まず、横並びで配置する要素をfloat: leftを指定します。もし、特製要素のみ右側に固定したいならrightを指定します。それで、これらを含むコンテナdivタグを作成し、:after仮想セレクタでclearをします。
<style>
.h-container:after { clear: both; display: block; content: ” }
.h-container .item {
float: left;
width: 120px;
text-align: center;
border-right: 1px solid #ddd;
}
.h-container .item.login {
float: right;
border-right: none;
}
</style>
<div class=”h-container”>
<div class=”item”>menu A</div>
<div class=”item”>menu B</div>
<div class=”item”>menu C</div>
<div class=”item login”>Login</div>
</div>
出力結果
menu Amenu Bmenu CLogin
複雑なレイアウトでも下記のように作成できます。
nbsp;
例
<style>
.test-layout { width: 500px; }
.test-layout .gnb { padding: 15px; background-color: skyblue; }
.test-layout .main { background-color: white; }
.test-layout .main:after { clear: both; display: block; content: ” }
.test-layout .main .lnb { float: left; width: 100px; height: 254px; background-color: orange; }
.test-layout .main .content { float: left; width: 400px; }
.test-layout .footer{ padding: 15px; background-color: #ddd; }
</style>
<div class=”test-layout”>
<div class=”gnb”>Menu</div>
<div class=”main”>
<div class=”lnb”>Left Menu</div>
<div class=”content”>
Content
</div>
</div>
<div class=”footer”>
Footer
</div>
</div>
出力結果
MenuLeft MenuContent
nbsp;
■総合
コンテナの中にまたコンテナが入ったり、コンテナを複数で配置したりなど状況に合わせて使いましょう。
例
<style>
.clearfix { clear: both; content: ''; display: block }
.test-site { background-color: white; }
.test-site .header { background-color: #01579B; height: 70px; }
.test-site .gnb { border-bottom: 1px solid #ddd; }
.test-site .gnb > div { float: left; width: 100px; text-align: center; height: 30px; border-right: 1px solid #ddd; }
.test-site .gnb > div.selected { background: #70acdc; }
.test-site .main .lnb { float: left; width: 25%; background-color: #f3f3f3; height: 300px; }
.test-site .main .article { float: left; width: 75%; }
.test-site .footer { background-color: #f0f0f0; border-top: 1px solid #ddd; height: 40px; }
</style>
<div class="test-site">
<div class="header"></div>
<div class="gnb clearfix">
<div></div>
<div class="selected"></div>
<div></div>
</div>
<div class="main clearfix">
<div class="lnb"></div>
<div class="article"></div>
</div>
<div class="footer"></div>
</div>
出力結果