Question

我需要一些CSS帮助。

我想创建这个结构：

我想用960px创建一个中心固定的菜单; - 这很简单......

在与菜单相同的行上，我想创建两个div：一个从显示器的左边框开始，直到距离midle最近的居中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

我很确定你能用这个得到你想要的东西：

The Holy Grail 3 column liquid layout

只需添加：

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

您可能需要额外的修补程序。

css浮动在固定元素旁边

3 个答案: