Question

让我们说，我有宽度为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>

Answer 1

这是一个更多的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>

<强> CSS

#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;
}

http://jsfiddle.net/daCrosby/NR2kX/1/

Answer 2

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

HTML：

<div id="container">
  <div class="small">lorem ipsum dolor sit amet</div>
  <div class="small">lorem ipsum dolor sit amet</div>
  <div class="small">lorem ipsum dolor sit amet</div>
</div>

CSS：

* {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -o-box-sizing:border-box;
  -ms-box-sizing:border-box;
  box-sizing:border-box;
}

#container {
  margin: 0 auto;
  width: 65%;
  height: 300px;
}

.small {
  float: left;
  width: 33.3%;
  padding-right: 10px;
  height: 100%;
}

.small:last-child {
  padding: 0;
}

我用过

box-sizing: border-box

包括以百分比声明的宽度填充。我还使用了:last-child选择器来删除最后一个元素的填充。请务必检查box-sizing

的浏览器支持

Answer 3

这意味着你的33％的引用宽度将包括所有填充等，并且没有必要改变宽度作为边框框帐...这里也是一些浏览器兼容性选项！

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

Here is a helpful link on box sizing!

Answer 4

如果我正确阅读，你希望3个div占其父div的33％。 33.3％x 3 = 100％（足够接近）但是如果你想要填充，你必须减少div的百分比。例如，将3个div设置为30％（30％x 3 = 90％）允许你有10％的le-way，所以你可以让每个div有3.33％的填充，或者你想分配它:)

Answer 5

以这种方式完成：

    <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>

Answer 6

尝试这不是完美但也许这个帮助

HTML

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

CSS

 .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}

工作Demo

3个div与百分比宽度

6 个答案: