0

为什么这个中心不#block1和#block2？

<div id="superwrapper">
    <div id="wrapper">
        a
        <div id="block1">
            pippo
        </div>
        <div id="block2">
            pluto
        </div>
    </div>
</div>

div#superwrapper {
    width:100%;
    height:210px;
    background-color:#FFFFCC;
    border:dotted;
}

div#wrapper {
    text-align:left;
    width:500px;
    heigth:205px;
    margin:0,auto;
    border:dotted;
}

div#block1 {
    text-align:left;
    float:left;
    width:200px;
    height:200px;
    border:dotted;
}

div#block2 {
    text-align:left;
    float:left;
    width:200px;
    height:200px;
    border:dotted;
}
4

5 回答 5

6 
margin: 0, auto;

这里的逗号不是正确的语法。它应该只是一个空格：

margin: 0 auto;

此外，正如@BillyMoat 指出的那样，heigth应该是height.

于 2012-08-20T22:06:53.503 回答
0

您需要在文档的开头声明 doctype。

<!DOCTYPE html>
于 2012-08-20T23:41:19.167 回答
0

我认为您错过了保证金的单位。尝试类似：

margin: 0px auto;
于 2012-08-21T15:06:04.027 回答
0 
div#wrapper {
    text-align:left;
    width:500px;
    heigth:205px;
    margin:0 auto;
    border:dotted;
}
于 2012-08-20T22:07:42.303 回答
0

两天前我刚开始学习 CSS，并使用这个问题来更熟悉边距。希望我不会将您与我下面的陈述混淆。

无论如何，我在原始代码中没有发现任何可以告诉浏览器将 block1 和 block2 放入中心的内容。

我的解决方案如下：使用 float:right; 对于块 2。然后为 block1 和 block2 添加边距。由于所有块都使用固定宽度，您可以计算出左边（block1）和右边（block2）边距必须设置为33px。边框需要几个像素（默认 = 中等；无法找出有多少像素用于中等）。最后，它看起来像 27px 是相当不错的。

这里的代码：

div#superwrapper {
width:100%;
height:210px;
background-color:#FFFFCC;
border:dotted;
}

div#wrapper {
text-align:left;
width:500px;
height:205px;
margin:0 auto;
border:dotted;
}

div#block1 {
text-align:left;
float:left;
width:200px;
height:200px;
border:dotted;
margin: 0 0 0 27px;
}

div#block2 {
text-align:left;
float:right; 
width:200px;
height:200px;
border:dotted;
margin: 0 27px 0 0;
}

希望这会有所帮助并能解决问题吗？

于 2012-08-21T21:06:15.327 回答