y.o.designers-works

要素の横並びをリキッドレイアウト(px・%単位)で、ネガティブ…

要素の横並びをリキッドレイアウト(px・%単位)で、ネガティブマージンを使って実装する方法になります。

要素2個並び(width指定)

CSSの記述


.list-box {
	overflow: hidden;
	*zoom: 1;
	width: 740px;
}
 
.list-box ul {
	margin: 0 -20px 0 0;
	padding: 0;
}
 
.list-box li {
	float: left;
	width: 360px;
	height: 360px;
	margin: 0 20px 20px 0;
	background-color:#000;
}

HTMLの記述

<div class="list-box">
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>        
	</ul>
</div>

※ulに対しcrearfixも忘れずに

要素3個並び(width100%指定)

CSSの記述


.list-box3_r {
    overflow: hidden;
    *zoom: 1;
    width:100%;
}
  
.list-box3_r ul {
    margin: 0 -3.03% 0 0;
    padding: 0;
}
  
.list-box3_r li {
    float: left;
    width: 30.3%;
    margin: 0 3.03% 20px 0;
}

.list-box3_r li img{
	width:100%;
}

HTMLの記述

<div class="list-box3_r">
	<ul>
		<li></li>
		<li></li>
		<li></li>    
	</ul>
</div>

※ulに対しcrearfixも忘れずに

スポンサーリンク

他にオススメな記事