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为负宽度便可；