2列布局（左列固定宽度，右液体+清除：两者）

只需要帮助，因为我一直在尝试对此进行整理，现在已经有很多年了。我需要的是：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语法清除：在右列中均为，将所有内容移到左列后面。这是一个正确的行为，没有任何反对。

但我relly需要用明确的：无论是在路上，它仅仅停留在右列的情况下（不得到由左边的列在所有受影响的，不动的下面）

有没有简单的解决方法来保留页面设计的基本浮点概念？

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

来源

2011-07-22 Ondrej

演示：http://jsfiddle.net/a4xyV/ –

这是你改变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两件事：

的320x240像素的.wrap div元素填充，
在.main股利-220px右边距正确对齐页面的流体部分。

因为我们已经漂浮在右边的.main DIV，只要你想的clear: both;现在只影响.main DIV中的内容。

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

来源

2011-07-23 00:29:06

这是我一直在寻找。谢谢！ ;） – Ondrej

-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-22 23:39:27 FiveTools

演示：http://jsfiddle.net/a4xyV/1/ –

的问题是很老，但这里是我最近找到了另一种解决方案。

我们只需要做两件事情：

添加overflow: auto;到.main DIV
确保包装中加入overflow: hidden;到.wrap格，或添加.clear DIV作为最后一个子保存文档流.wrap元素

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

来源

2017-05-17 09:21:10

2列布局（左列固定宽度，右液体+清除：两者）

回答

相关问题