css的自適應佈局-js教程-PHP中文網

首頁

web前端

js教程

css的自適應佈局

php中世界最好的语言

Mar 19, 2018 am 10:31 AM

css 佈局

這次帶給大家css的自適應佈局，css自適應佈局的注意事項有哪些，下面就是實戰案例，一起來看一下。

　　首先，這個這麼扯淡又裝逼的名字不知道是誰起的，大意就是說：中間的內容隨著瀏覽器寬度的不同，進行寬度自適應操作，而兩邊的內容固定寬度。

　　來，上個程式碼示範一下：

 1     <style> 2             *{ 3                 margin: 0; 4                 padding: 0; 5             } 6             .wrap { 7                 background-color: #FBD570; 8                 overflow: hidden; 9             }10             .left {11                 float: left;12                 width: 100px;13                 background: #00f;14                 height: 180px;15             }16             .right {17                 float: right;18                 width: 150px;19                 background: #0f0;20                 height: 200px;21             }22             .center {23                 background: #B373DA;24                 height: 150px;25                 margin-left: 100px;26                 margin-right: 150px;27             }28         </style>29     </head>30     <body>31         <p class="wrap">32             <p class="center">center，可以自适应浏览器宽度，高度可固定也可以由内容撑开。</p>33             <p class="left">left，宽度固定，高度可固定也可以由内容撑开</p>34             <p class="right">right，宽度固定，高度可固定也可以由内容撑开</p>35         </p>36     </body>

登入後複製

　　然後出來的效果是這樣的：

#　　這個大塊頭的中間部分確實可以隨著瀏覽視窗寬度的改變而改變：

#　　但是，臥槽，很獵奇啊有木有？！中間的主體叉在兩側內容上方是什麼鬼？我們預期的是讓它們在一個水平線上。將程式碼改為如下：

 1 <style> 2             *{ 3                 margin: 0; 4                 padding: 0; 5             } 6             .wrap { 7                 background-color: #FBD570; 8                 padding: 0 150px 0 100px; 9                 overflow: hidden;10             }11             .left {12                 float: left;13                 width: 100px;14                 background: #00f;15                 height: 180px;16                   margin-left: -100%;17                   position: relative;18                   left:-100px;19             }20             .right {21                 float: right;22                 width: 150px;23                 background: #0f0;24                 height: 200px;25                 margin-left: -150px;26                 position: relative;27                   right:-150px;28             }29             .center {30                 background: #B373DA;31                 height: 150px;32                 float: left;33                 width: 100%;34             }35         </style>36     </head>37     <body>38         <p class="wrap">39             <p class="center">center，可以自适应浏览器宽度，高度可固定也可以由内容撑开。</p>40             <p class="left">left，宽度固定，高度可固定也可以由内容撑开</p>41             <p class="right">right，宽度固定，高度可固定也可以由内容撑开</p>42         </p>43     </body>

登入後複製

　　思路如下：.讓左邊的盒子上去，需要設定其左邊距為負的中間盒子的寬度，也就是.left {margin-left:- 100%;}。這樣左盒子才可以往最左邊移動。而讓右邊的盒子上去

需要設定其左邊距為負的自己的寬度，也就是.right {margin-left：-150px;}。這樣右盒子才可以在一行的最右邊顯示出自己。

　　你是不是以為搞定了？其實沒有，因為中間主體部分的「center，可以」這幾個字被擋住了，也就是說新來的這兩個所謂「飛翼」把主體的內容擋住了。所以我們還需要把這兩個小破翼給挪出去，但是又不能挪到螢幕外邊，因為這樣我們就看不到了。

　　所以呢，我們做如下操作，利用父級元素設定左右內邊距的值，把父級的三個子盒子往中間擠。即.wrap{ padding: 0 150px 0 100px;}。這樣就給這兩個小破翼騰出了一點空間。

　　最後，把左右兩個小破翼分別“抽出來”，即

.left{ position: relative; left: -100px;}
.right{position: relative;right: -150px;}

登入後複製

　　這樣，這個什麼什麼雙飛茶杯佈局就完成了。

我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7488

CakePHP 教程

1377

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

bootstrap按鈕怎麼用 Apr 07, 2025 pm 03:09 PM

如何使用 Bootstrap 按鈕？引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。

bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

bootstrap怎麼調整大小 Apr 07, 2025 pm 03:18 PM

要調整 Bootstrap 中元素大小，可以使用尺寸類，具體包括：調整寬度：.col-、.w-、.mw-調整高度：.h-、.min-h-、.max-h-

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。