Html 带流体左柱和固定右柱的双柱div布局

我想使用DIVs制作一个两列布局，其中右列的固定宽度为200px，左列将占据所有剩余空间

如果您使用表格，这很容易：

<table width="100%">
  <tr>
    <td>Column 1</td>
    <td width="200">Column 2 (always 200px)</td>
  </tr>
</table>

第1栏
第2列（始终为200px）

---

但是div呢？有可能做到这一点吗？如果是，那么如何解决？

CSS解决方案

#left{
    float:right;
    width:200px;
    height:500px;
    background:red;   
}

#right{
    margin-right: 200px;
    height:500px;
    background:blue;
}

var parentw = $('#parent').width();
var rightw = $('#right').width();
$('#left').width(parentw - rightw);

检查工作示例

jQuery解决方案

#left{
    float:right;
    width:200px;
    height:500px;
    background:red;   
}

#right{
    margin-right: 200px;
    height:500px;
    background:blue;
}

var parentw = $('#parent').width();
var rightw = $('#right').width();
$('#left').width(parentw - rightw);

---

检查工作示例

我最近在这个网站上看到了使用CSS的液体布局。 （请查看下面链接中的演示页面）

作者现在提供了一个固定宽度布局的示例。退房

这提供了以下示例， （对于像你这样的两栏式布局，我想）

（对于三列布局）

很抱歉有这么多链接到这个男人的网站，但我认为这是一个了不起的资源

这里有一个解决方案（它有一些怪癖，但如果您注意到它们并且它们是一个问题，请告诉我）：

你好，世界
你好，世界

CSS：

HTML:

<div id="sidebar">I'm 200px wide</div>
<div id="content"> I take up the remaining space <br> and I don't wrap under the right column</div>

我宽200像素
我占用了剩余的空间
并且我没有在右栏下换行

上面的方法应该有效，如果你想让代码加宽并居中，你可以把它放在包装器中，

overflow:hidden

在没有宽度的列上是让它垂直包含的关键，就像不环绕边列一样（可以是左或右）

---

IE6可能也需要在#content div上设置

zoom:1

，如果您需要它的支持

以下示例是按源代码顺序排列的，即HTML源代码中第1列出现在第2列之前。列是显示在左侧还是右侧由CSS控制：

固定右键

#包装器{
右边距：200px；
}
#内容{
浮动：左；
宽度：100%；
背景色：#CCF；
}
#边栏{
浮动：对；
宽度：200px；
右边距：-200px；
背景色：#FFA；
}
#清除{
明确：两者皆有；
}

第1栏（流体）
第2栏（固定）

我认为这是一个简单的答案，这将根据父级宽度将子开发人员分成50%

 <div style="width: 100%">
        <div style="width: 50%; float: left; display: inline-block;">
            Hello world
        </div>
        <div style="width: 50%; display: inline-block;">
            Hello world
        </div>
    </div>

你好，世界
你好，世界

#包装器{
保证金权利：50%；
}
#内容{
浮动：左；
宽度：50%；
背景色：#CCF；
}
#边栏{
浮动：对；
宽度：200px；
右边距：-200px；
背景色：#FFA；
}
#清除{
明确：两者皆有；
}

第1栏（流体）
第2栏（固定）

简短回答？这就是我要寻找的：但我如何看待代码？？）右键单击并查看源代码。每个页面都包含必要的标记和CSS，以实现您在该页面上看到的结果。请尝试调整给定页面的浏览器大小，看看它对页面的影响。@Silver Light我使用过的大多数现代浏览器都允许您使用Ctrl+U来查看源代码。@Hussein

内联块在IE6和IE7中可以正常工作。它只需要一些帮助，但在这里没有必要，我认为浮动成功了，当使用float时，显示属性将被忽略。。我查一下though@clairesuzy是的，接得好。我已经有一段时间没做css和html了，下次我会尽量少做些草率的事情，做得更好一点。不用担心，这是一个正确的解决方案；）-检查后：
display:inline block
在上面的代码中不应该是必需的，但是由于双边距错误，
display:inline
可能对IE6和以下版本有用-如果遇到另一个好的错误，尽管您不需要清除div，因为包装器是浮动的，它已经清除了（包含浮动列）是的，它就在那里，因为我有一个习惯，每当我使用浮动时都会添加清除：）@clairesuzy:我现在明白为什么我需要清除分区了。。。当列高度不相等时，清除div可确保以下项目（例如页脚或小提琴中的“惊喜我”按钮）不会干扰任一列。谢谢，在这种情况下非常正确，我把我使用的另一个布局弄乱了——它构建在一个包含float/wrapper的整体中——上面的布局可以在任意一侧执行任意数量的侧栏——我几乎将它用作所有内容的基础；）抱歉，我把它和您的混淆了。在我添加了一个内部侧栏之前，由于某种原因，流体柱会在侧栏下方包裹起来。float:right或float:left with overflow:hidden是最好的解决方案，因为不需要对非float元素进行计算，并且支持显示：无需制作滑块！此外，非浮点元素将其宽度传播到所有自由空间+1 +1 +1