CSS小技巧

1 如何實現盒子在頁面中水平垂直居中

.mydiv{width:300px;height:200px;position:absolute;left:50%;top:50%;margin:-100px 0 0 -150px; }

2 左右兩個盒子,左邊的盒子寬度固定,右邊的盒子寬度隨着瀏覽器窗口的寬度改變而改變

	.mydiv{width:100%;}
	.left{width:300px;height:200px;border:1px solid #ccc;float: left;background: #ccc;}
	.right{background:pink;margin-left:300px;}
<div class="mydiv">
 	<div class="left">我是左邊的盒子<br>我是左邊的盒子<br>我是左邊的盒子<br>我是左邊的盒子<br>我是左邊的盒子<br>我是左邊的盒子<br></div>
 	<div class="right">
 		我是右邊的盒子我是右邊的盒子我是右邊的盒子我是右邊的盒子我是右邊的盒子我是右邊的盒子我是右邊的盒子我是右邊的盒子我是右邊的盒子我是右邊的盒子我是右邊的盒子我是右右邊的盒子我是右邊的盒子右邊的盒子我是右邊的盒子右邊的盒子我是右邊的盒子右邊的盒子我是右邊的盒子
 	</div>
 </div>   

3 css div自適應高度

內容增多時自適應高度,而內容較少時div有一定最小高度;

.mydiv{height:200px; /* IE6識別*/ min-height:200px; /* css最小高度爲200px支持所有瀏覽器,IE6瀏覽器除外 */} 




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章