html – 2列布局(左列固定宽度,右流体清除：两者)

只是需要帮助,因为我一直在尝试排序这几年.我需要的：

我有一个2列布局,其中左列具有固定宽度220px,右列具有流体宽度.

<!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>Fluid</title>
    <style type="text/css" media="screen">
        html,body { background: #ccc; }
        .wrap      { margin: 20px; padding: 20px; background: #fff; }
        .main      { margin-left: 220px; width: auto }
        .sidebar   { width: 200px; float: left; }
        .main,.sidebar   { background: #eee; min-height: 100px; }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="sidebar">This is the static sidebar</div>
        <div class="main">This is the main,and fluid div</div>
    </div>
</body>
</html>

根本没有问题.当我使用css语法清除：在右列中,所有内容在左列之后移动.这是正确的行为,没有反对.

但是我非常需要使用清楚的方式：两者都保持在正确的列的上下文中(不会受到左列的影响,并且不会在下面移动)

有没有简单的介绍,保留页面设计的基本浮动概念？

更新：请看这个链接,知道我在说什么,因为它可能有点混乱从我的描述.
链接：http://jsfiddle.net/k4L5K/1/

解决方法

这是你改变的CSS：

html,body {
    background: #ccc;
}

.wrap {
    margin: 20px;
    padding: 20px;
    padding-right:240px;
    background: #fff;
    overflow:hidden;
}

.main {
    margin: 0 -220px 0 auto;
    width: 100%;
    float:right;
}

.sidebar {
    width: 200px;
    float: left;
    height: 200px;
}

.main,.sidebar {
    background: #eee; min-height: 100px;
}

.clear { clear:both; }
span { background: yellow }

基本上我做了什么是改变你的布局的方式,所以.main div浮动在右边.为此,我们不得不添加2件事情：

> .wrap div上的一个240px的填充,和
>在-2020px的.main div上的右边距,以正确对齐页面的流体部分.

因为我们已经把右边的.现在只需要影响.main div内的内容.

你可以在这里看到一个演示：http://jsfiddle.net/6d2qF/1/

原文地址：https://www.jb51.cc/html/230316.html

html – 2列布局(左列固定宽度,右流体清除：两者)

解决方法

相关推荐