Question

我需要帮助，因为我现在已经尝试了很多次。我需要的是：

我有一个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语法 clear：both 时，所有内容都会在左列下移动。这是一种正确的行为，没有任何反对意见。

但我非常需要使用clear：两种方式，它只保留在右列的上下文中（根本不受左列影响，并且不会在下面移动）

是否有任何简单的方法可以保留页面设计的基本浮动概念？

更新：请参阅此链接以了解我所处的内容，因为它可能与我的描述有点混淆。链接：http://jsfiddle.net/k4L5K/1/

Answer 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浮动在右边。要做到这一点，我们必须添加两件事：

.wrap div上的填充为240px，
在.main div上的右边距-220px，以正确对齐页面的流体部分。

由于我们已将.main div放在右侧，因此clear: both;现在只会影响.main div中的内容。

您可以在此处看到演示：http://jsfiddle.net/6d2qF/1/

Answer 2

问题已经很久了，但这是我最近发现的另一种解决方案。

我们只需做两件事：

将overflow: auto;添加到.main div
确保包装器通过向overflow: hidden; div添加.wrap或将.clear div添加为.wrap元素的最后一个子

这是更新的小提琴：http://jsfiddle.net/k4L5K/89/

Answer 3

试试这个：

<!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; }
        .main,
        .sidebar   { background: #eee; min-height: 100px; float: left; }
        .clear {clear:both;}
    </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 class="clear"></div>
    </div>
</body>
</html>

2列布局（左列固定宽度，右流体+透明：两者）

3 个答案: