2列div布局：固定宽度的右列，左边的stream体
我的要求很简单： 2列右侧有一个固定的大小 。 不幸的是我找不到工作的解决scheme，无论是在计算器上还是在Google上。 如果我在自己的情况下执行，那么所描述的每个解决scheme都会失败 目前的解决scheme是：
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>
我用上面的代码得到以下内容：
|----------------------- -------| | fooburg content | | |-------------------------------| | | test right | |----------------------- -------|
请指教。 非常感谢！
删除左列的浮动。
在HTML代码中，右列需要在左列之前。
如果右边有一个浮点数（和一个宽度），如果左边的列没有宽度和浮点数，它将是灵活的:)
还应用一个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：
.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; }
示例： http : //jsfiddle.net/jackJoe/fxWg7/
见http://www.alistapart.com/articles/negativemargins/ ，这正是你所需要的（ 例4那里）。
<div id="container"> <div id="content"> <h1>content</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu.</p> <p class="last">Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget metus.</p> </div> </div> <div id="sidebar"> <h1>sidebar</h1> <ul> <li>link one</li> <li>link two</li> </ul> </div>
#container { width: 100%; background: #f1f2ea url(background.gif) repeat-y right; float: left; margin-right: -200px; } #content { background: #f1f2ea; margin-right: 200px; } #sidebar { width: 200px; float: right;
最好避免在左边放置右列，只需使用负右边距。
并且通过join@media设置来进行“响应”，所以右边的列在窄屏幕左侧。
<div style="background: #f1f2ea;"> <div id="container"> <div id="content"> <strong>Column 1 - content</strong> </div> </div> <div id="sidebar"> <strong>Column 2 - sidebar</strong> </div> <div style="clear:both"></div>
<style type="text/css"> #container { margin-right: -300px; float:left; width:100%; } #content { margin-right: 320px; /* 20px added for center margin */ } #sidebar { width:300px; float:left } @media (max-width: 480px) { #container { margin-right:0px; margin-bottom:20px; } #content { margin-right:0px; width:100%; } #sidebar { clear:left; } } </style>
到目前为止最简单和最灵活的解决scheme使用table display ：
HTML，左div首先，右div来第二…我们读和写从左到右，所以没有任何意义，把div从右到左
<div class="container"> <div class="left"> left content flexible width </div> <div class="right"> right content fixed width </div> </div>
CSS：
.container { display: table; width: 100%; } .left { display: table-cell; width: (whatever you want: 100%, 150px, auto) } .right { display: table-cell; width: (whatever you want: 100%, 150px, auto) }
案例：
// One div is 150px fixed width ; the other takes the rest of the width .left {width: 150px} .right {width: 100%} // One div is auto to its inner width ; the other takes the rest of the width .left {width: 100%} .right {width: auto}
我想build议一个尚未提到的解决scheme：使用CSS3的calc()混合%和px单位。 calc()现在有很好的支持 ，它可以快速构build相当复杂的布局。
下面的代码是一个JSFiddle链接。
HTML：
<div class="sidebar"> sidebar fixed width </div> <div class="content"> content flexible width </div>
CSS：
.sidebar { width: 180px; float: right; background: green; } .content { width: calc(100% - 180px); background: orange; }
另外一个JSFiddle展示了这个概念应用于更复杂的布局。 我在这里使用了SCSS，因为它的variables允许使用灵活的自描述代码，但是如果“硬编码”值不是问题，则可以在纯CSS中轻松地重新创build布局。
这是一个通用的HTML源代码解决scheme，其中：
- 源顺序中的第一列是stream体
- 源顺序中的第二列是固定的
- 这个列可以使用CSS左右浮动
固定/第二列在右边
#wrapper { margin-right: 200px; } #content { float: left; width: 100%; background-color: powderblue; } #sidebar { float: right; width: 200px; margin-right: -200px; background-color: palevioletred; } #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#left { width: 600px; float: left; } div#right { width: 240px; float: right; } div.clear { clear:both; }
在左右容器下放置一个清晰的div。
我简化了它：我已经编辑jackjoe的答案。 高度自动等不是我需要的。
CSS：
#container { position: relative; margin:0 auto; width: 1000px; background: #C63; padding: 10px; } #leftCol { background: #e8f6fe; width: auto; } #rightCol { float:right; width:30%; background: #aafed6; } .box { position:relative; clear:both; background:#F39; } </style>
HTML：
<div id="container"> <div id="rightCol"> <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p> <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p> </div> <div id="leftCol"> <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p> <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p> <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
Lorem ipsum dolor sit amet，consectetuer adipiscing elit。 Phasellus varius eleifend。 Lorem ipsum dolor sit amet，consectetuer adipiscing elit.Phasellus varius eleifend。
</div> </div> <div class="box"> <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p> <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p> <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p> </div>
