利用CSS的float屬性實現(xiàn)二級響應式頁面的方法？這個問題可能是我們?nèi)粘W習或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！
話不多說，直接來看正文~
我們使用float：left屬性來實現(xiàn)二級響應式頁面
代碼如下：
LRColumnSimple.html
重慶分公司
重慶分公司
說明文字
說明文字
說明文字
說明文字
說明文字
LRColumnSimple.css
body {
background-color:#C0C0C0;
}
.Container {
background-color:#FFFFFF;
width:760px;
margin-left:auto;
margin-right:auto;
}
.LeftColumn {
float:left;
width:360px;
}
.RightColumn {
float:left;
width:360px;
}
.EndColumn {
clear:left;
}在瀏覽器上的效果如下：
補充：將圖像在顯示在框架中間
在框架的中間顯示圖像的話，需要設置為圖像設置text-align：center。
代碼如下：
LRColumnSimpleImageCenter.html
效果如下：圖像在中間顯示
在頁面上的響應式顯示
LRColumnSimpleResponsiveW1.html
LRColumnSimpleResponsiveW1.css
body {
background-color:#C0C0C0;
}
.Container {
background-color:#FFFFFF;
width:70%;
margin-left:auto;
margin-right:auto;
}
.LeftColumn {
float:left;
width:360px;
}
.RightColumn {
float:left;
width:360px;
}
.EndColumn {
clear:left;
}效果如下：
如果您在此處縮小寬度，它將會變?yōu)槿缦聢D所示。它用浮動左對齊，但由于寬度變窄，它變成一個包裹的顯示。此時，當圖像在右邊界上時，圖像的說明文本顯示在圖像上，左邊的說明文本顯示在圖像的底部。
響應的例子：
在先前的HTML中，存在如下問題：當窗口寬度變窄并且框架被折疊時，說明文字的位置不能成為同一位置的問題。我來介紹避免這種現(xiàn)象的代碼。
LRColumnSimpleResponsiveW2.html
LRColumnSimpleResponsiveW2.css
body {
background-color:#C0C0C0;
}
.Container {
background-color:#FFFFFF;
width:70%;
margin-left:auto;
margin-right:auto;
}
.TextColumnA {
float:left;
width:360px;
}
.ImageColumnA {
float:left;
width:360px;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.TextColumnB {
float:right;
width:360px;
}
.ImageColumnB {
float:right;
width:360px;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.EndColumn {
clear:both;
}說明：
TextColumnA和ImageColumnA類用于左側的描述性文本，而框架用于顯示右側的圖像。對于這些類，指定了float：left，并且前面描述的描述性語句位于左側，圖像位于右側。另一方面，TextColumnB和ImageColumnB類用于右側的描述性文本，而框架用于顯示左側的圖像。在這些類中，指定了float：right，因此前面描述的描述性文本將放在右側，圖像將放在左側。
當窗口寬度變窄時，先前描述的框架首先顯示在float：left的框架中。即使在指定了float：right的幀中，也會首先執(zhí)行前面描述的描述性語句的放置，因此描述框架的文字將顯示在圖像上方。
效果如下：
減小窗口的寬度?？蚣軐⒄郫B，但描述文字將在圖像上均勻顯示。
下面我們來看一個基于前面代碼的實際例子
LRColumnSimpleResponsive.html
LRColumnSimpleResponsive.css
body {
background-color:#C0C0C0;
}
.Container {
background-color:#FFFFFF;
width:760px;
margin-left:auto;
margin-right:auto;
}
.TextColumnA {
float:left;
width:360px;
}
.ImageColumnA {
float:left;
width:360px;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.ImageColumnA img{
width:200px;
}
.TextColumnB {
float:right;
width:360px;
}
.ImageColumnB {
float:right;
width:360px;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.ImageColumnB img{
width:200px;
}
.EndColumn {
clear:both;
}
@media screen and (max-width: 760px) {
.Container {
width:95%;
}
.TextColumnA {
float:none;
width:100%;
}
.ImageColumnA {
float:none;
width:100%;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.ImageColumnA img{
width:80%;
}
.TextColumnB {
width:100%;
}
.ImageColumnB {
width:100%;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.ImageColumnB img{
width:80%;
}
}說明：
它與前面的代碼相同，但如果使用CSS媒體查詢并且Web瀏覽器的寬度為760像素或更小，則將float設置為none并取消該列。此外，圖像顯示的屏幕寬度為80％。它由此在一列中顯示。
效果如下：
如果窗口的寬度是760像素或更多，則它顯示在兩列中。
當窗口的寬度變?yōu)?60像素或更小時，它變?yōu)橐涣?。圖像的寬度也是橫向寬度的80％。
感謝各位的閱讀！看完上述內(nèi)容，你們對利用CSS的float屬性實現(xiàn)二級響應式頁面的方法大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關文章內(nèi)容，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。
