css - 两行三个均匀间隔的 div/容器

Question

到目前为止，我自己尝试的一切都以彻底失败告终。 示例:http://broadleafdesign.ca/index-broken-on-purpose-.html 这看起来非常好，在 Chrome 中以全屏模式完美地居中显示在我的显示器上。任何其他监视器或浏览器窗口的大小都会使段落偏离中心。

如何让这些段落看起来像这张图片，箭头代表空白？

注意:我希望容器/div 居中，尽管我制作的图片并不能很好地表示:

Answer 1

这是我在 jsfiddle 上为您提供的示例中的一些基本 CSS http://jsfiddle.net/Pm56t/

实现此布局的基本方法是将 3 个元素的宽度声明为 33.333%，然后添加 float:left。垫口味..

* {
    margin:0;
    padding:0;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

.container {
    width:100%;
}
.box {
    float:left;
    width:33.333%;
    padding:20px;
}