浮動兩端對齊布局

02-04

<!DOCTYPE html>n<html lang="zh">n n nnt<head>ntt<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />ntt<title>浮動兩端對齊</title>ntt<style type="text/css">ntttul,ntttli {nttttmargin: 0;nttttpadding: 0;nttt}ntttnttth2 {nttttclear: both;nttttfont-size: 1.2em;nttt}ntttnttt.justify {nttttwidth: 320px;ntttt/* 1行3個li，li之間距離10px = 100px*3 + 10px*2 */nttttoverflow: hidden;nttttmargin: 10px;nttttborder: 1px solid #999999;nttt}ntttnttt.justify ul {nttttwidth: 330px;ntttt/* 可容納下3列的寬度 */nttttmargin-bottom: -10px;ntttt/* 隱藏掉最下面一行的margin-bottom */nttttoverflow: hidden;nttttzoom: 1;ntttt/* 觸發IE的Layout */nttt}ntttnttt*+html .justify ul {nttttmargin-bottom: 0;ntttt/* 針對IE7中最後1行li的margin-bottom失效 */nttt}ntttnttt.justify li {nttttdisplay: inline;nttttfloat: left;nttttlist-style: none;nttttwidth: 100px;nttttheight: 100px;nttttmargin: 0 10px 10px 0;nttttbackground: #EEEEEE;nttt}ntttnttt.margin ul {nttttwidth: auto;nttttmargin: 0 -10px -10px 0;nttt}ntttnttt.col-2 {nttttwidth: 210px;nttt}ntttnttt.col-4 {nttttwidth: 430px;nttt}ntt</style>nt</head>nnt<body>ntt<div>nttt<a href="http://www.ddcat.net/blog/?p=1199" title="回到貓窩Blog">回到貓窩Blog</a>ntt</div>ntt<h1>浮動兩端對齊</h1>ntt<h2>ul定寬</h2>ntt<div class="justify">nttt<ul>ntttt<li>靠左邊</li>ntttt<li>中間</li>ntttt<li>靠右邊</li>ntttt<li>靠左邊</li>ntttt<li>中間</li>ntttt<li>靠右邊</li>ntttt<li>靠左邊</li>ntttt<li>中間</li>ntttt<li>靠右邊</li>nttt</ul>ntt</div>ntt<h2>ul使用負margin值</h2>ntt<div class="justify margin">nttt<ul>ntttt<li>靠左邊</li>ntttt<li>中間</li>ntttt<li>靠右邊</li>ntttt<li>靠左邊</li>ntttt<li>中間</li>ntttt<li>靠右邊</li>ntttt<li>靠左邊</li>ntttt<li>中間</li>ntttt<li>靠右邊</li>nttt</ul>ntt</div>ntt<h2>兩列</h2>ntt<div class="justify margin col-2">nttt<ul>ntttt<li>靠左邊</li>ntttt<li>靠右邊</li>ntttt<li>靠左邊</li>ntttt<li>靠右邊</li>ntttt<li>靠左邊</li>ntttt<li>靠右邊</li>nttt</ul>ntt</div>ntt<h2>四列</h2>ntt<div class="justify margin col-4">nttt<ul>ntttt<li>1</li>ntttt<li>2</li>ntttt<li>3</li>ntttt<li>4</li>ntttt<li>5</li>ntttt<li>6</li>ntttt<li>7</li>ntttt<li>8</li>nttt</ul>ntt</div>ntt<div>nttt<a href="http://www.ddcat.net/blog/?p=1199" title="回到貓窩Blog">回到貓窩Blog</a>ntt</div>nt</body>nn</html>n