請先看圖,這裡主要用到了float屬性,該屬性的值指出了對象是否及如何浮動
文法： float : none | left |right
參數： none : 對象不浮動;left : 對象浮在左邊;right : 對象浮在右邊
請看代碼,請CSS高手指教,其他還可以用position來實現兩欄,只是用習慣了float.
Code#wrap{width:960px;margin: 0 auto;}
#header
{
height:80px;
margin: 0 auto;
clear: both;
border:#CCCCCC 1px solid;
}
/* 左邊 */
#sideleft
{
height:120px;
float: left;
width:200px;
overflow: hidden;
border:#CCCCCC 1px solid;
}
/* 右邊 */
#sideright
{
height:120px;
float: right;
width: 750px;
overflow: hidden;
background-color: #fcf8f7;
border:#CCCCCC 1px solid;
}
/* 頁尾 */
#footer{height: 50px;border:#CCCCCC 1px solid;margin: 0 auto;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<a name="top"></a>
<span>頁頭</span>
</div>
<div class="blank9"></div>
<div id="sideleft">
<span>左邊</span>
</div>
<div id="sideright">
<span>右邊</span>
</div>
<div class="blank9"></div>
<div id="footer">
<div id="foot">
<span>頁尾</span>
</div>
</div>
</div>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
