レイアウト
ブロック要素とfloat
横並びデザインの表現基本的にfloat: leftを指定して横並びを実現するが、
<div style="float: left;">A</div>
<div style="float: left;">B</div>
<div>C</div>
上記の場合、Cまで横に並んでしまう
<div style="clear: both;">C</div>
で解除する必要がある
flot要素の高さ
<style>
cf:after {
content: '';
display: block;
clear: both;
}
.cf {
zoom: 1;
}
</style>
paddingとmarginの使い分け
- paddingはグリープングする要素に指定する
- margninはグルーピングされた要素に指定する
区切り線を含むリスト構造
<style>
.imgListWrapper {
overflow: hidden; /* 内包要素がはみ出た部分を隠す事ができる */
}
.imgList {
width: 300px;
margin-left: -1px;
}
.imgList li {
float: left;
width: 79px;
margin-top: 10;
padding-right: 10px;
padding-left: 10px;
border-left: 1px dashed #333;
}
</style>
<div class="imgListWrapper">
<ul class="imgList cf">
<li><span>イメージ</span></li>
<li><span>イメージ</span></li>
<li><span>イメージ</span></li>
<li><span>イメージ</span></li>
<li><span>イメージ</span></li>
<li><span>イメージ</span></li>
<li><span>イメージ</span></li>
<li><span>イメージ</span></li>
</ul>
</div>
縦編
<style>
.imgListWrapper {
overflow: hidden; /* 内包要素がはみ出た部分を隠す事ができる */
}
.imgList {
margin-top: -1px;
}
.list li {
padding-top: 10px;
padding-bottom: 10px;
border-top: 1px dashed #333;
}
</style>
<div class="listWrapper">
<ul class="list cf">
<li><span>イメージ</span></li>
<li><span>イメージ</span></li>
<li><span>イメージ</span></li>
</ul>
</div>
