两行三个均匀分布的div /容器

Question

到目前为止，我自己尝试过的所有事情都以完全失败告终。 示例：http://broadleafdesign.ca/index-broken-on-purpose-.html 这看起来非常精致，完全集中在我的Chrome全屏显示器上。任何其他监视器或浏览器窗口的大小都会使段落居中。

如何使这些段落与此图片类似，箭头代表空白？

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

Answer 1

将边距和div元素定义为百分比也可能有效。

Answer 2

以下是我在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;
}