3个具有百分比宽度的div答案

【问题标题】：3 divs with percentage width3个具有百分比宽度的div
【发布时间】：2013-03-14 08:25:41
【问题描述】：

比方说，我有一个宽度为 65% 的 div，在该 div 内我需要再创建 3 个 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>

【问题讨论】：

标签： css html

【解决方案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/

【讨论】：

【解决方案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的支持

【讨论】：

【解决方案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!

【讨论】：

【解决方案4】：

如果我没看错，您希望 3 个 div 占其父 div 的 33%。 33.3% x 3 = 100%（足够接近）但如果你想填充你必须减少 div 的百分比。例如，将 3 个 div 设置为 30% (30% x 3 = 90%) 允许您拥有 10% 的 le-way，因此您可以每个 div 拥有 3.33% 的填充，或者您想要分配它:)

【讨论】：

【解决方案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>

【讨论】：

这是否适用于固定宽度（10 像素）的垫片？
这对我来说并不重要。仍然在这个解决方案中，我遇到了间隔 div 的问题，它们需要在里面显示一个符号......
尝试使用不易损坏的空间。与普通空间相同，但不会塌陷。 &nbsp;

【解决方案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

【讨论】：