Question

我是新来的。目前正在为网站制作布局，我正在尝试为布局设置我的css规则。

这个想法是在页面的中心位置：标题，内容，页脚。并在Content div旁边放置Aside（横幅div）。

到目前为止，我喜欢这样：http://goo.gl/8vzX4B（jsfiddle）

使用Block2或Blue div。如何将它附加在红色div旁边，它不会影响其他任何东西？

我尝试了很多浮动组合但到目前为止没有任何工作。

感谢任何帮助！

CSS：

#block1 {
    margin-left: auto;
    margin-right: auto;
    width:900px;
    float:center;
    height:100px;
    background:black;
    margin-bottom:20px;
    }

#container {width:100%;
float:left;}

#block2 {

    width:900px;
    float:right;
    min-width:100px;
    width:200px;
    background:blue;
    height:300px;
    margin-right:20px;
}

#block3 {
    margin-left: auto;
    margin-right: auto;
    width:900px;
    float:center;
    background:red;
    min-height:400px;
    margin-bottom:20px;
}

#block4 {
    margin-left: auto;
    margin-right: auto;
    width:900px;
    float:center;
    height:150px;
    background:green;
}

Answer 1

在这种情况下，如果所有宽度都是固定的，您需要将容器宽度设置为导航的宽度加上内容的宽度加上任何边距或填充。

因此内容为900px，导航为200px，导航边距为20px = 1120px

#container { width:1120px; }

同时删除所有margin-left: auto和margin-right: auto规则。

小提琴：http://jsfiddle.net/jNVvy/64/

Answer 2

如果我明白你想要实现的目标。您应该从block4移出container（页脚？）。比宣布

#container { display:table; min-width:900px; /*at least header width */ }
#block2, #block3 { display:table-cell; }

CSS - 标题，内容，右侧div，页脚 - 无法正确定位

2 个答案: