Css 3个带百分比宽度的div

比方说，我有一个65%宽的div，在这个div里面，我需要再创建3个div，它们在同一条线上，大小相同，但大小应该是%，侧面div和中间div之间应该有10px的间隙。有什么建议吗

到目前为止，我有以下代码：

    <div style="width: 65%; margin: 0 auto; text-align:left; margin-bottom: 10px;">
<div style="float:left; margin-right: 10px;">1</div>
<div style="float:left; margin-right: 10px;">2</div>
<div style="float:left;">3</div>
</div>

1.
2.
3.

如果我读对了，你希望3个div是其父div的33%。33.3%x 3=100%（足够接近），但是如果你想要填充，你必须减少div的百分比。例如，将3个div设置为30%（30%x 3=90%）可以使您有10%的空间，因此您可以将每个div设置为3.33%的填充空间，或者按您希望的方式分配：）

这是我能想到的最接近的解决方案：

HTML:

我用过

box-sizing: border-box

在以百分比表示的宽度中包含填充。我还使用了

：last child

选择器来删除最后一个元素的填充。请确保检查浏览器对

的支持，方法如下：

    <div style="width: 65%; margin: 0 auto; text-align:left; margin-bottom: 10px;">
<div style="float:left; width: 30%; background-color: #FFFFFF;">1</div>
<div style="float:left; width: 5%;">.</div>
<div style="float:left; width: 30%; background-color: #FFFFFF;">2</div>
<div style="float:left; width: 5%;">.</div>
<div style="float:left; width: 30%; background-color: #FFFFFF;">3</div>
</div>

1.
.
2.
.
3.

这意味着您引用的33%宽度将包括所有填充等，无需更改宽度，因为边框框说明了这一点。。。。这里还有一些浏览器兼容性选项

   box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */

---

这是一个稍微多一些的HTML，但对我来说效果相当不错

HTML

<div id="hold">
    <div class="innerHold"><div class="inner col1">
        Column won
    </div></div>
    <div class="innerHold"><div class="inner col2">
        Col Two
    </div></div>
    <div class="innerHold"><div class="inner col3">
        Col 3
    </div></div>
    <div class="clear"></div>
</div>

---

试试这个，虽然不是最完美的，但可能会有帮助

html

---

工作

在固定的间隔宽度（10px）下工作吗？这对我来说真的没什么关系。在这个解决方案中，我仍然遇到了间隔分隔符的问题，它们需要在内部显示一个符号…尝试使用不可破坏的空格。和普通空间一样，但不会塌陷<代码>

   box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */

<div id="hold">
    <div class="innerHold"><div class="inner col1">
        Column won
    </div></div>
    <div class="innerHold"><div class="inner col2">
        Col Two
    </div></div>
    <div class="innerHold"><div class="inner col3">
        Col 3
    </div></div>
    <div class="clear"></div>
</div>

#hold{
    width: 65%;
    margin: 0px auto;
}
.innerHold{
    float: left;
    width:33.33333%;
    /* make sure left/right margins or left/right padding are 0px here
            - it'll mess with the width otherwise*/
    margin-left:0px;
    margin-right:0px;
    padding-left:0px;
    padding-right:0px;
}
.inner{
    /* Here set your columns padding, borders, and margin 
            - or in the class names as I do below */
    margin:0px;
}
.col1, .col2{
    margin-right:10px;
}
.clear{
    clear:both;
}

 <div class="wrapper">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box noMarginRight">3</div>
</div>

 .wrapper {
    float:left;
    width:65%;
    background-color:#555;
}
.box {
    float:left;
    width:31.4%;
    background-color:#000;
    margin:0 10px 0 0;
}
.noMarginRight {margin-right:0 !important}