0

我在 Dreamweaver 中使用流体网格布局，并且在同一行上有三个 div。它看起来不错，除了我想在页面上居中所有三个 div。现在他们都被转移到左边，因为这显然是他们被告知要做的。我只是不知道如何告诉他们要居中。

帮助将不胜感激！

它现在看起来完全像这样（不是我的图像）：

#item1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 32.6007%;
    display: block;
}
#item2 {
    clear: none;
    float: left;
    margin-left: 1.0989%;
    width: 32.6007%;
    display: block;
}
#item3 {
    clear: none;
    float: left;
    margin-left: 1.0989%;
    width: 32.6007%;
    display: block;

#featuredholder {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}

编辑：

请看一下这张照片，看看我正在使用什么。在此处输入图像描述

我需要那些 div 居中并且仍然保持流畅。

4

2 回答 2

1

如果我理解正确，你只需要添加margin: 0 auto;到你的包装器中。

#wrapper
{
    width: 80%;
    margin: 0 auto;
    padding: 10px;
}

#item1 {
    float: left;
    width: 32.6007%;
}
#item2 {
    float: left;
    width: 32.6007%;
}
#item3 {
    float: left;
    width: 32.6007%;
}

span.clear /*clearfix*/
{
    display: block;
    clear: both;
}

此外，您不需要display: block;在 div 上声明，因为默认情况下它是块级元素。也删除 div 上的清除，否则这会破坏浮动（这就是span.clear在你的三个 div 之后的用途。）

演示：http: //jsfiddle.net/Kyle_Sevenoaks/ZSYnW/

在您发表评论后，您需要添加一个额外的 div 来包裹居中的元素，将该 div 的边距设置为0 auto并重组 HTML 的其余部分，以便每个两个块都位于另一个包装器 div 中：)

http://jsfiddle.net/Kyle_Sevenoaks/ZSYnW/1/

于 2012-08-20T07:25:51.503 回答
1

嘿，现在习惯了这个 css 就像这样

#wrapper{
margin:0 auto;
width:800px;
overflow:hidden;
}

#item1, #item2 , #item3 {
float:left;
width:30%;
 }
#item1{
margin-left:3%;
}
于 2012-08-20T07:19:07.773 回答