0

在转向 Sass 和 Less 之前，我目前正在构建自己的小型流体网格供我个人使用，因为我不需要大型框架，因为我希望了解它们背​​后的一些更简单的步骤。我想要做的是基于页面居中列。由于包装器仅使用屏幕的 90% 宽度

<body>
    <div class="wrapper">
        <div class="Column">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
        </div>

        <div class="Column">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
        </div>

        <div class="Column last">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
        </div>
    </div>
</body>

CSS

body{
    text-align:center;
}

.wrapper{
    margin: 0 auto;
    width : 90%;
}

.Column{
    float : left;
    width : 22%;
    margin-right : 4%;
}

.last{
    margin-right : 0;
}

我在这里设置了一个小测试，希望将列居中http://jsfiddle.net/rjtK9/

4

2 回答 2

1

您的包装器已经居中。您的列在包装器内浮动。因此，您可能应该只增加列的大小：

.Column{
    float : left;
    width : 30%;
    margin-right : 4%;
}
于 2013-04-21T12:48:36.463 回答
1

它已经居中了，你只是在给宽度时保守了两个
我刚刚放了一个小小提琴

我所做的是为 Column 提供 33% 的宽度，并在右侧设置一个 20px 的装订线。添加以下CSS

-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box;   
 box-sizing: border-box;

上面的代码包括 33% 宽度的填充。
有关盒子尺寸检查的更多信息，请在此处查看

于 2013-04-21T12:51:00.223 回答