关于div一侧固定,另一侧自适应

最新推荐文章于 2019-06-29 09:45:08 发布

weixin_30425949

最新推荐文章于 2019-06-29 09:45:08 发布

阅读量75

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml

原文链接：http://www.cnblogs.com/yzenet/p/4707664.html

本文介绍了一种使用CSS实现一侧固定宽度而另一侧自适应宽度的布局方法。通过浮动、margin及padding属性结合使用，使得左侧固定宽度，右侧内容自适应填充剩余空间。此布局方式适用于多种屏幕尺寸。

关于div一侧固定,另一侧自适应，从文字看出

一侧固定:说明有固定长度,

一侧自适应:说明是按比例缩放

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    
    <style type="text/css">
    
        .box {
            padding-right: 200px;
        }
        
        .left{
　　　　　　　　/*
　　　　　　　　　　这里主要考虑 margin-right:-300px; 和padding-right:200的比较以及 95%自适应宽度,当页自动缩放还会在同一行
　　　　　　       基本原理在上面已经说明清楚
                 ps: 首先浮动让两个块级元素在同一行,一个向左一个向右 一个设置页面比例和一个设一定的宽度(初步完成)
                 如果没有margin-right:-300px本例还是会撑下去的!
　　　　　　　　*/

            float: right; width:300px; min-height: 500px; margin-right: -300px;  background: red;
        }
        .right {
            float: left; width:95%; min-height:500px; background: green;
        }
    
    </style>
    
</head>
<body>

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>