12

只是需要帮助，因为我多年来一直在尝试解决这个问题。我需要的：

我有一个 2 列布局，其中左列具有固定宽度 220 像素，右列具有可变宽度。

代码是：

    <!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: 都在右列时，所有内容都在左列下移动。这是正确的行为，没有任何反对意见。

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

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

更新：请参阅此链接以了解我在说什么，因为我的描述可能有点令人困惑。链接：http: //jsfiddle.net/k4L5K/1/

4

3 回答 3

25

这是您更改后的 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 }

基本上我所做的是改变你的布局方式，使.maindiv 浮动在右侧。为此，我们必须添加两件事：

  1. .wrapdiv上的 240px 内边距，以及
  2. -220px的 div 上的右边距，.main以正确对齐页面的流动部分。

因为我们将.maindiv 浮动在右侧，所以clear: both;现在只影响.maindiv 内的内容，如您所愿。

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

于 2011-07-23T00:29:06.383 回答
0

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

我们只需要做两件事：

  1. 添加overflow: auto;到.maindiv
  2. 确保包装器通过添加overflow: hidden;到.wrapdiv 或将.cleardiv 添加为元素的最后一个子.wrap元素来保留文档流

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

于 2017-05-17T09:21:10.293 回答
-2

试试这个：

<!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>
于 2011-07-22T23:39:27.683 回答