3个百分比宽度的div

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>

- Tautvydas

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/

- DACrosby

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的浏览器支持情况。

- Arman P.

Answer 3

这意味着您引用的33％宽度将包括所有填充等，无需更改宽度，因为边框盒会考虑到这一点...此外还有一些浏览器兼容选项！

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

这里有一个关于盒模型的有用链接！

- Henry Quekett

Answer 4

如果我理解正确，您希望这3个div占其父div的33％。 33.3％ x 3 = 100％（足够接近），但是如果您想要填充，则必须减少div的百分比。例如，将3个div设置为30％（30％ x 3 = 90％）可以让您有10％的余地，因此您可以将每个div分配3.33％的填充或者您想要分配的任何其他方式 :)

- Akira Dawson

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>

- Tautvydas

---

这个在间隔符的固定宽度（10像素）下能行吗？ - DACrosby

对我来说并不是很重要。但在这个解决方案中，我有一个关于间隔 div 的问题，它们需要一个符号才能显示... - Tautvydas

尝试使用不可断行空格代替。它与普通空格相同，但不会被压缩。  - DACrosby

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}

正在工作演示

- jhunlio