左流体固定而右流体固定的两列div布局

| 我想使用DIV进行两列布局，其中右列将具有200px的固定宽度，而左列将占用剩余的所有空间。如果使用表格，这非常简单：

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

但是DIV呢？有可能做到这一点吗？如果是，那怎么办？

已邀请:

7 个回复

豪抱怒掳

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

#wrapper {
  margin-right: 200px;
}
#content {
  float: left;
  width: 100%;
  background-color: #CCF;
}
#sidebar {
  float: right;
  width: 200px;
  margin-right: -200px;
  background-color: #FFA;
}
#cleared {
  clear: both;
}

<div id=\"wrapper\">
  <div id=\"content\">Column 1 (fluid)</div>
  <div id=\"sidebar\">Column 2 (fixed)</div>
  <div id=\"cleared\"></div>
</div>

妒垮

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

<div>
    <div style=\"width:200px;float:left;display:inline-block;\">
        Hello world
    </div>
    <div style=\"margin-left:200px;\">
        Hello world
    </div>
</div>

弛保矮瘦敖

CSS：

#sidebar {float: right; width: 200px; background: #eee;}
#content {overflow: hidden; background: #dad;}

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>

上面的方法应该起作用，如果您想要给它宽度并居中，则可以将该代码放在包装器中，在没有宽度的列上放置overflow:hidden是垂直包含它的关键，因为不要环绕在侧面列中（可以向左或向右） IE6可能也需要在#content div上设置zoom:1，如果需要它的支持

炉挤仙挟

CSS解决方案

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

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

在http://jsfiddle.net/NP4vb/3/查看工作示例 jQuery解决方案

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

检查工作示例http://jsfiddle.net/NP4vb/

财沟项胶

最近，有人向我展示了这个网站，了解使用CSS进行液体布局的情况。 http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts（在下面的链接中查看演示页面）。作者现在提供一个固定宽度布局的示例。查看; http://matthewjamestaylor.com/blog/how-to-convert-a-liquid-layout-to-fixed-width。这提供了以下示例， http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm（对于两列布局，我想是这样） http://matthewjamestaylor.com/blog/fixed-width-or-liquid-layout.htm（用于三列布局）。很抱歉有这么多链接到此伙计们的网站，但我认为这是一个很棒的资源。

芦歉竭皑

我认为这是一个简单的答案，这将根据父级宽度将子级dev分别拆分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>

咖哀烈

#wrapper {
  margin-right: 50%;
}
#content {
  float: left;
  width: 50%;
  background-color: #CCF;
}
#sidebar {
  float: right;
  width: 200px;
  margin-right: -200px;
  background-color: #FFA;
}
#cleared {
  clear: both;
}

<div id=\"wrapper\">
  <div id=\"content\">Column 1 (fluid)</div>
  <div id=\"sidebar\">Column 2 (fixed)</div>
  <div id=\"cleared\"></div>
</div>

要回复问题请先登录或注册

左流体固定而右流体固定的两列div布局

7 个回复

发起人

html

css

fluid_layout

问题状态

左流体固定而右流体固定的两列div布局

与内容相关的链接

7 个回复

发起人

html

css

fluid_layout

问题状态