css之左邊div固定寬度右邊div自適應佈局

時間 2019-11-19

標籤 css 左邊 div 固定寬度右邊自適應佈局欄目 CSS 简体版

原文原文鏈接

0、要實現的佈局的效果圖是這樣子的：
css

a）外邊有個大的div背景爲粉紅色，包住裏面的div，寬度自適應，高度根據裏面兩個div高度最大那個撐高；
html

b）裏面左邊是一個黃色的div，固定寬度；
佈局

c）裏面右邊是一個綠色的div，寬度自適應；
spa

一、開始的思路是用float:left；後來發現綠色的div根本不可能佈局在右邊且寬度自適應；code

二、後來的思路是讓裏面兩個div都設置爲絕對定位position:absolute;但發現這樣脫離了文檔裏，外面粉紅色的div高度就沒法撐開了；htm

三、後來網上找到一種方法，先吊下你的胃口，一步一步實現：文檔

a）先佈局好三個div：it

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    body { margin:0;padding:0;text-align:center; }
    #content { background:#ffcccc; }
    #left { background:#ffffcc;height:400px;width:200px; }
    #right { background:#ccffcc;height:400px;width:100%; }
    </style>
</head>
<body>
    <div id="content">
        <div id="left"></div>
        <div id="right"></div>
    </div>
</body>
</html>

b）是的，你會發現綠色的右div不在右邊，那我就來把裏面兩個div都設置爲float:left;
io

#left { background:#ffffcc;height:400px;width:200px;float:left; }
#right { background:#ccffcc;height:400px;width:100%;float:left; }

c）悲劇，粉紅的div寬度不能被撐開，後來想到用個清除浮動來解決，便是clear:both;在粉紅的div裏面的最後寫上如下代碼：
class

<div id="content">
    <div id="left">left</div>
    <div id="right">right</div>
    <div style="clear:both"></div>
</div>

d）好了，回來了，別小心，綠色的div仍是在粉紅色的div裏面，不信能夠給粉紅的div設置如下border看下，而後給粉紅的div設置padding-left:200px;

#content { background:#ffcccc;padding-left:200px; }

e）好了，綠色的div位置差很少搞定了，剩下就是把黃色的div往左移動回原位，用margin-left:-200px;

#left { background:#ffffcc;width:200px;height:200px;float:left;margin-left:-200px; }

f）隨便讓黃色的div或綠色的div高度變高點，看會不會撐開粉紅色的div；

#left { background:#ffffcc;height:300px;width:200px;float:left;margin-left:-200px; }

四、搞定了，主要思路就是讓外面大的div設置padding爲左邊固定寬度的div的寬度大小，再設置左邊固定寬度的div的margin-left爲負寬度便可；

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。