CSS布局：中欄固定寬度,左右兩欄寬度自適應

發表日期：2016-02-14 文章編輯：南昌開優網絡瀏覽次數：4577 標簽：CSS應用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS布局：中欄固定寬度,左右兩欄寬度相等同時自適應寬度-開優網絡</title> 
<STYLE type="text/css"> 
*{ 
margin:0; 
padding:0; 
} 
body{ 
font-family:Verdana, Arial, Helvetica, sans-serif; 
min-width:620px; 
} 
#header,#footer{ 
clear:both; 
padding:10px; 
text-align:center; 

} 
#left, 
#right{ 
float:left; 
width:50%; 
margin:0 0 0 -151px; 
} 
#innerLeft, 
#innerRight{ 
margin:0 0 0 151px; 
background-color:#efefef; 
} 
#middle{ 
float:left; 
width:300px; 
background-color:#ccc; 
} 
.inner { 
padding:12px; 
} 
</STYLE> 
</head> 

<body> 
<div style="text-align:center;margin:20px"> 
</div> 

<DIV id="header"> 
<H1>固定中欄寬度, 左右兩欄寬度相等和自適應</H1></DIV> 
<DIV id="left"> 
<DIV id="innerLeft" class="inner"> 
<P><STRONG>表現:</STRONG>中間一欄居中與固定寬度，左右兩欄寬度相等同時自適應寬度。</P></DIV></DIV> 
<DIV id="middle"> 
<DIV id="innerMiddle" class="inner"> 
<P><STRONG>原理:</STRONG>利用margin的負值錯別固定的寬度，因為要分兩邊，所以只要錯開一中間的固定寬度就行</P></DIV> 
</DIV> 
<DIV id="right"> 
<DIV id="innerRight" class="inner"> 
<P><STRONG>問題:</STRONG>IE對寬度乘百分比的計算不大好，有必要犧牲一兩px的顯示，IE6也沒最小寬度。</P></DIV></DIV> 

</body> 
</html>

返回列表

上一篇：CSS簡單重疊線效果下一篇：CSS布局：右欄固定寬度,左欄內容先出現...

欧美日韩一区二区三区四区不卡,日韩欧美视频一区二区三区四区,久久精品欧美一区二区三区不卡,国产精品久久久乱弄

CSS布局：中欄固定寬度,左右兩欄寬度自適應