當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

一个三行两列右列固定左列自适应宽度的CSS

發布時間：2024/9/20 CSS 79 豆豆

生活随笔收集整理的這篇文章主要介紹了一个三行两列右列固定左列自适应宽度的CSS 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

<?xml?version="1.0"?encoding="UTF-8"?>
<!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"?/>
?<meta?http-equiv="Content-Language"?content="GB2312"?/>
?<meta?name="author"?content="DSclub,兀兒-干部"?/>
?<meta?name="Copyright"?content="任兀"?/>
?<meta?content="代碼"?name="keywords"?/>
????<title>XHML1.0?DOC</title>
?<style?type="text/css"?id="internalStyle">
body{margin:?0;?padding:?0;}
p{display:block;font:?bold?12px?serif;?color:?#339;}
?#header{height:?64px;?background:?#F00;?color:?#FFF;?font:?bold?24px?"Impact",serif;line-height:160%;?text-indent:?36px;}
?#maincontent{margin-top:20px;}
?#right{float:?right;?width:?160px;?background:?#DEF;}
?#left{margin-right:?180px;?background:?#CFC;?color:?#999;?}
?#left?h1{text-decoration:?underline;font:?italic?bold?16px?serif;}
?#footer{clear:?both;?min-height:?80px;?background:?#EEE;?text-align:?center;?font:?italic?bold?20px?"Impact",sans-serif;?color:?#999;margin-top:20px;}
?</style>
??</head>
??<body>
<div?id="header">Head?Info</div>

<div?id="maincontent">
??<div?id="right">
?<p>Right?Info</p>
?<p>#right{</p><p>float:?right;?</p><p>margin:?20px;?</p><p>width:?160px;?</p><p>background:?#DEF;</p><p>}</p>
??</div>
????<div?id="left">
?????<h1>Style:</h1>
?????<p>#left{</p>
?????<p>margin-right:?180px;</p>
?????<p>background:?#CFC;</p>
?????<p>color:?#999;</p>
?????<p>}</p>
?????<h1>Main?Content!?Main?Content!?Main?Content!?Main?Content!?Main?Content!?Main?Content!?Main?Content!?</h1>
?????<h1>Main?Content!?Main?Content!?Main?Content!?Main?Content!?Main?Content!?Main?Content!</h1>
?????<h1>Main?Content!?Main?Content!?Main?Content!?Main?Content!?Main?Content!?</h1>
?????<h1>Main?Content!?Main?Content!?Main?Content!?Main?Content!</h1>
?????<h1>Main?Content!?Main?Content!?Main?Content!</h1>
?????<h1>Main?Content!?Main?Content!</h1>
?????<h1>Main?Content!</h1>
?????</div>
??</div>
?<div?id="footer">Powered?By?DSclub</div>?
??</body>
</html> 與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的一个三行两列右列固定左列自适应宽度的CSS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。