bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

CSS中固定寬度的三列布局怎么用-創新互聯

這篇文章給大家分享的是有關CSS中固定寬度的三列布局怎么用的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

目前創新互聯公司已為數千家的企業提供了網站建設、域名、虛擬主機、網站托管維護、企業網站設計、龍口網站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協力一起成長，共同發展。

固定寬度三列布局
這很基礎，我們直接看代碼便能明白：

<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;}

實例：實現三列圖片等寬等間距布局
CSS中固定寬度的三列布局怎么用

每個圖片塊左浮動,寬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是沒有效果的.
要實現響應式的正方形,可以使用單位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根據寬設置高,保證兼容性:

<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中固定寬度的三列布局怎么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

當前文章：CSS中固定寬度的三列布局怎么用-創新互聯
本文地址：http://vcdvsql.cn/article30/csceso.html

成都網站建設公司_創新互聯，為您提供動態網站、Google、虛擬主機、軟件開發、響應式網站、云服務器

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯

成都網站建設公司