溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關CSS中固定寬度的三列布局怎么用的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
固定寬度三列布局
這很基礎，我們直接看代碼便能明白：
<div id="wrapper"> <div id="header">header</div> <div id="body" class="cls"> <div id="aside"> <div class="inner"> aside <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> </div> <div id="content" class="cls"> <div id="main"> <div class="inner"> main <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> </div> <div id="content-aside"> <div class="inner"> content-aside <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> </div> </div> </div> <div id="footer">footer</div> </div>
#header{ width: 980px; height: 90px; margin: 0 auto; background: #f60;}
#body{ width: 980px; margin: 0 auto;}
#aside{ float: left; width: 240px; background: #ccc;}
#content{ margin-left: 240px;}
#main{ float: left; width: 540px; background: pink;}
#content-aside{ float: left; width: 200px; background: orange; }
#footer{ width: 980px; height: 90px; margin: 0 auto; background: #08f;}實例：實現(xiàn)三列圖片等寬等間距布局
每個圖片塊左浮動,寬30%,左外邊距2.5%:
100%=(2.5%+30%)+(2.5%+30%)+(2.5%+30%)+2.5%
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
<title>三列圖片等寬布局</title>
<style>
* {
margin: 0;
padding: 0;
}
img {
display: block;
width: 30%;
margin: 2.5% 0 0 2.5%;
float: left;
}
</style>
</head>
<body>
<div>
<img src="byd.jpg" /><img src="byd.jpg" /><img src="byd.jpg" />
<img src="byd.jpg" /><img src="byd.jpg" /><img src="byd.jpg" />
<img src="byd.jpg" /><img src="byd.jpg" /><img src="byd.jpg" />
</div>
</body>
</html>width: 30%; 表示父級元素寬度的30%.
height: 30%; 如果沒有設置父級元素的具體高度,那么這個height是沒有效果的.
要實現(xiàn)響應式的正方形,可以使用單位vw(Viewport Width):
.square {
width: 30%;
height: 30vw;
background: url("byd.jpg") no-repeat scroll center 0 transparent;
background-size: 100% 100%;
margin: 2.5% 0 0 2.5%;
float: left;
}不過需要注意的是,低版本IE和低版本Android/iOS瀏覽器都不支持視窗(viewport)單位.
或者使用JS根據(jù)寬設置高,保證兼容性:
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("img").height($("img").width());
});
$(window).resize(function(){
$("img").height($("img").width());
});
</script>百分比布局也可以看做是一種響應式布局.
簡單實用的 百分比布局 還是很適合手機WAP頁面布局的:
min-width:320px; max-width:980px; width:100%; overflow-x: hidden; margin: 0 auto;
最小寬度320px,最大寬度980px,在320px和980px之間自動適應寬度,看起來還行.
在<img>標簽里只用設置width屬性百分比值,比如width="40%",不用設置height屬性,這樣圖片能夠自行按原比例縮放.
容器里面的塊,同樣可以用百分比布局,比如左邊的60%,右邊的40%.
感謝各位的閱讀！關于“CSS中固定寬度的三列布局怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
