css - CSS浮动在固定元素旁边

Question

我需要一些关于 CSS 的帮助。

我想创建这个结构：

我想创建一个菜单，中心固定，960px；- 这很简单..

在与菜单相同的行上，我想创建两个 div：一个从显示器的左边框到离中间最近的 centered-div，另一个从居中的下一个到显示器的右边框.

我将尝试使用键来描述您。

| left_div | | _fixed_centered_960px_div| |__right_div |

左右 div 将是流动的，取决于屏幕分辨率。

任何人都可以帮助我吗？

谢谢。

Answer 1

一些失败的想法： http: //jsfiddle.net/kC35U/，http : //jsfiddle.net/kC35U/1/

最终的解决方案：

http://jsfiddle.net/kC35U/4/

带有额外标记的 HTML：

<div id="bar">
  <div class="left"><div>LEFT</div></div>
  <div class="right"><div>RIGHT</div></div>
  <div class="center">CENTER</div>
</div>
<div>
  Footer
</div>​

CSS：

中心 div，固定宽度，居中，没什么特别的：

.center {
    width: 500px;
    margin: 0 auto;
}

现在，为左侧/右侧制作两个 50% 宽的包装 div。将它们的高度设置为 0 以保持所有三个 div 的顶部对齐：

.left {
    width: 50%;
    margin-right: auto;
    height: 0;
}

.right {
    width: 50%;
    margin-left: auto;
    height: 0;
}

内部 div 填充其父级，但我们切断了中心 div 的一半宽度。

.left > div {
    margin-right: 250px;
}

.right > div {
    margin-left: 250px;
}

如果你想在三列下面放一些东西，那么你必须使用一些奇怪的技巧：

.left:after, .right:after {
  content: '';
  float: left;
  height: 0;
}

#bar + * {
    clear: both;
}​

Answer 2

你可以像这样使用css

#fixed{
    margin:0 px auto;
    width: 960px;
}    
#container {
    padding-left: 205px;      /* LC fullwidth */
    padding-right: 205px;     /* RC fullwidth + CC padding */
    background:#FFFF99;
}

 #container .column {
    position: relative;
        float: left;
    }

    #center {
        padding: 20px 0px 20px 0px;       /* CC padding */
        width: 100%;
        height:auto;
    }
    #content{padding:10px;height:auto;border-right:1px dashed;color:#fed88e;}

    #right{
        width: 205px;             /* RC width */
        padding: 0px;          /* RC padding */
        margin-right: -100%;
    }
#left{
 width : 205px;
padding: 0px
margin-left:-100%;

}

和html之类的

<div id="fixed">
<div id="container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>
</div>

Answer 3

我很确定你可以用这个得到你想要的：

圣杯 3 列液体布局

只需添加：

#col1 { margin: 0 auto; width: 960px; }

您可能需要额外的修补。