Question

我正在创建一个总体宽度为12500像素的网站，它的构建分为5页。

http://70.33.241.140/~flori281/website/

问题是我不知道如何将包装中心？因为屏幕宽度有很多不同。有没有办法让div“.box”自动扩展到screenwidth？

Answer 1

使用auto和margin-left属性的margin-right设置，通过CSS水平居中：

.centered {
    margin-left: auto;
    margin-right: auto;
}

Answer 2

你的包装持有人div css是

.box {
    float: left;
    line-height: 22px;
    width: 2400px;
}

宽度为2400px，因此您不会将其视为中心，但它居中。

Answer 3

你必须改变你的CSS中的一些东西：

#content{
    height:100%;
    width:100%;
    left:0;
    top:0;
    position:absolute;
}
.box{
    line-height:22px;
}

现在我明白你要做什么了。在那种情况下，你将不得不使用JavaScript。但是保留CSS就像我给出的示例一样，因此在加载时看起来会很好。

$(document).ready(function(){
    var actualContentWidth = $("#content").width();
    var boxes = $("#content .box").length;
    var newWidth = boxes * actualContentWidth;
    newWidth += "px";
    $("#content").css({width:newWidth });
    $("#content .box").css({width:actualContentWidth + "px",float:'left'});
});

如果您希望在窗口调整大小时调整大小：

function reCalculateSizes(){
    $("#content").css({width:"100%"});
    var actualContentWidth = $("#content").width();
    var boxes = $("#content .box").length;
    var newWidth = boxes * actualContentWidth;
    newWidth += "px";
    $("#content").css({width:newWidth });
    $("#content .box").css({width:actualContentWidth + "px",float:'left'});
}
$(document).ready(reCalculateSizes);
$(window).resize(reCalculateSizes);

将包装器置于水平网站上

3 个答案: