2列div布局：右列固定宽度，左流体 [英] 2 column div layout: right column with fixed width, left fluid

问题描述

我的要求很简单： 2列，其中右栏有固定大小。不幸的是，我找不到一个工作的解决方案，在stackoverflow或在谷歌。如果我在我自己的上下文中实现，每个解决方案都会失败。目前的解决方案是：

  div.container {
 position：fixed; 
 float：left; 
 top：100px; 
 width：100％; 
 clear：both; 
} 
 
 #content {
 margin-right：265px; 
} 
 
 #right {
 float：right; 
 width：225px; 
 margin-left：-225px; 
} 
 
 #right，#content {
 height：1％; / *固定为IE，虽然似乎不工作* / 
 padding：20px; 
} 
  

  < div class =container> 
< div id =content> 
 fooburg content 
< / div> 
< div id =right> 
 test right 
< / div> 
< / div> 
  

我得到以下代码：

< pre class =lang-none prettyprint-override> | ----------------------- ------- |
| foob​​urg content | |
| ------------------------------- |
| |测试权限|
| ----------------------- ------- |


请指教。非常感谢！

解决方案

删除左栏上的浮动。

在HTML代码，右边的列需要在左边的列之前。

如果右边有一个float（和一个宽度），如果左边的列't有一个宽度，没有浮动，它将是灵活的：）

还应用一个 overflow：hidden

最后，在左边的列中，添加一个 width：auto 和 overflow：hidden ，这使左列与右边的列无关（例如，如果调整了浏览器窗口大小，右边的列触及左边的列，没有这些属性，左边的列会在右边的列中运行，这个属性保留在它的空间）。

示例HTML：

 < div class =container> 
< div class =right> 
 right content fixed width 
< / div> 
< div class =left> 
 left content flexible width 
< / div> 
< / div> 
  

CSS：

 code> .container {
 height：auto; 
 overflow：hidden; 
} 
 
 .right {
 width：180px; 
 float：right; 
 background：＃aafed6; 
} 
 
 .left {
 float：none; / *不需要，只是为了澄清* / 
 background：＃e8f6fe; 
 / *下一个道具是为了保持这个块独立于其他浮动的* / 
 width：auto; 
 overflow：hidden; 
} 
  

示例： http://jsfiddle.net/jackJoe/fxWg7/

My requirement is simple: 2 columns where the right one has a fixed size. Unfortunately I couldn't find a working solution, neither on stackoverflow nor in Google. Each solution described there fails if I implement in my own context. The current solution is:

div.container {
    position: fixed;
    float: left;
    top: 100px;
    width: 100%;
    clear: both;
}

#content {
    margin-right: 265px;
}

#right {
    float: right;
    width: 225px;
    margin-left: -225px;
}

#right, #content {
    height: 1%; /* fixed for IE, although doesn't seem to work */
    padding: 20px;
}

<div class="container">
    <div id="content">
        fooburg content
    </div>
    <div id="right">
        test right
    </div>
</div>

I get the following with above code:

|----------------------- -------|
| fooburg content  |            |
|-------------------------------|
|                  | test right | 
|----------------------- -------|

Please advise. Many thanks!

解决方案

Remove the float on the left column.

At the HTML code, the right column needs to come before the left one.

If the right has a float (and a width), and if the left column doesn't have a width and no float, it will be flexible :)

Also apply an overflow: hidden and some height (can be auto) to the outer div, so that it surrounds both inner divs.

Finally, at the left column, add a width: auto and overflow: hidden, this makes the left column independent from the right one (for example, if you resized the browser window, and the right column touched the left one, without these properties, the left column would run arround the right one, with this properties it remains in its space).

Example HTML:

<div class="container">
    <div class="right">
        right content fixed width
    </div>
    <div class="left">
        left content flexible width
    </div>
</div>

CSS:

.container {
   height: auto;
   overflow: hidden;
}

.right {
    width: 180px;
    float: right;
    background: #aafed6;
}

.left {
    float: none; /* not needed, just for clarification */
    background: #e8f6fe;
    /* the next props are meant to keep this block independent from the other floated one */
    width: auto;
    overflow: hidden;
}​​

Example here: http://jsfiddle.net/jackJoe/fxWg7/

这篇关于2列div布局：右列固定宽度，左流体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！