DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> HTML布局之左右結構,左邊固定右邊跟據父元素自適應
HTML布局之左右結構,左邊固定右邊跟據父元素自適應
編輯:CSS詳解     

Html布局之左右結構,左邊固定右邊跟據父元素自適應,兼容IE6+、Firefox、Chrome、Opera、Safari,這裡是用表單寫的一個 demo,其實就在主體布局中也是可以的,比如像後台一些管理系統左側菜單,右側內容。這裡只是其中一種方法,更多方法可以查看 blog(http://www.jayzhang.cn/2014/01/layout_left_right/)

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	ul {
		list-style-type: none;
		padding: 0;
		margin: 0;
	}
	.item {
		overflow: hidden;
		zoom: 1;
		font-size: 12px;
		margin-bottom: 20px;
	}
	.item .item-title {
		float: left;
		width: 85px;
		font-size: 14px;
		font-weight: 400;
		text-align: right;
	}
	.item .item-con {
		overflow: hidden;
		zoom: 1;
	}
	em,i {
		font-style: normal;
	}
	p {
		margin: 0.3em 0;
	}
	.star {
		color: #F00;
		margin-right: 5px;
	}
	.tips-text {
		color: #ccc;
	}
	.input {
		border: 1px solid #ccc;
		padding: 2px 5px;
		margin: 0;
	}
	</style>
</head>
<body>
<ul>
	<li class="item">
		<div class="item-title">
			<em class="star">*</em><label for="">郵件地址</label><i>:</i>
		</div>
		<div class="item-con">
			<input class="input" placeholder="建議用手機號碼注冊" type="text" />
			<p class="tips-text">6~18個字符,可使用字母、數字、下劃線,需以字母開頭</p>
		</div>
	</li>
	<li class="item">
		<div class="item-title">
			<em class="star">*</em><label for="">密碼</label><i>:</i>
		</div>
		<div class="item-con">
			<input class="input" type="text" />
			<p class="tips-text">6~16個字符,區分大小寫</p>
		</div>
	</li>
	<li class="item">
		<div class="item-title">
			<em class="star">*</em><label for="">確認密碼</label><i>:</i>
		</div>
		<div class="item-con">
			<input class="input" type="text" />
			<p class="tips-text">請再次填寫密碼</p>
		</div>
	</li>
</ul>
</body>
</Html>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved