如何将html布局分成三列，div可以跨越多个1/3宽度？

Question

你将如何制作一个带有div的三列html布局，其中每个div可以跨越1/3，2/3或3/3的空间加上边距，以适用于任何组合的方式。 （显然只有组合是3 1/3宽度div，1 1/3宽度div和1 2/3宽度div，或1 3/3宽度div）

这可能有点令人困惑，所以这里有一张图片来说明我想要实现的目标：

这只是一个例子，div不一定是这个宽度，我只想要三种div类型，即使用任何宽度的1 / 3,2 / 3和3/3。

如果我的问题不明确，我很抱歉。

Answer 1

您可以轻松编写自己的内容来执行此操作。您的HTML将是这样的：

<div class="one-third">stuff</div>
<div class="one-third">stuff</div>
<div class="one-third">stuff</div>

或

<div class="one-third">stuff</div>
<div class="two-thirds">stuff</div>

或

<div class="three-thirds">stuff</div>

你的CSS会是这样的：

*, *:after, *:before {
    /* This is the part that allows your boxes to stay the size you define */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.one-third {
    float: left;
    width: 33%;
    padding-right: 20px;
}
.two-thirds {
    float: left;
    width: 67%;
    padding-right: 20px;
}
.three-thirds {
    float: left;
    width: 100%;
    padding-right: 0px;
}
.one-third:last-of-type, .two-thirds:last-of-type {
    /* Remove the padding if it is the last on the line */
    padding-right: 0px
}

以上是上述代码的jsfiddle。

我建议您查看Simple Grid因为它可以为您节省大量时间并为您提供更大的灵活性。

Answer 2

你的意思是这样http://jsfiddle.net/d97zY/2/，我纠正或错误地解释了这个错误的问题。  
HTML：

<div class="head">Header</div>
<div class="container"><p class="txt">Container</p>
    <div class="one">One</div>
    <div class="two">Two</div>
    <div class="three">Three</div>
</div>

定制CSS：

.head{background-color:blue; width:100%; color:white;}
.container{background-color:pink; width: 81%; margin:0 auto;}
.txt{position:absolute; margin-top:20px; color:#fff;}
.one{width: 27%; background-color:red; height:100px; display:inline-block; margin-right:9%; margin-left:5%;}
.two{width: 54%; background-color:yellow; height:100px; display:inline-block;}
.three{width: 81%; background-color:green; height:100px; display:inline-block; margin-left:9.5%;}