Html 3 个百分比宽度的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15398754/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
3 divs with percentage width
提问by Tautvydas
Lets say, I have div which is 65% in width, inside that div I need to create 3 more divs which are in same line, same size but size should be in % and there should be 10px gap between side divs and center div. Any suggestions?
比方说，我有一个宽度为 65% 的 div，在该 div 内，我需要再创建 3 个 div，它们在同一行中，大小相同，但大小应以 % 为单位，并且侧面 div 和中心 div 之间应该有 10px 的间隙。有什么建议？
So far I have the following code:
到目前为止，我有以下代码：
<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>
回答by DACrosby
This is a bit more HTML, but it's worked quite well for me.
这是一个多一点的 HTML，但它对我来说效果很好。
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
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;
}
回答by Arman P.
This is the closest solution I can think of: jsfiddle
这是我能想到的最接近的解决方案：jsfiddle
HTML:
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:
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;
}
I have used
我用过了
box-sizing: border-box
to include padding in width declared in percentages. I've also used :last-childselector to remove padding from last element. Make sure to check browser support for box-sizing
包括以百分比形式声明的宽度的填充。我还使用:last-child选择器从最后一个元素中删除了填充。确保检查浏览器支持box-sizing
回答by Henry Quekett
This will mean that your quoted width of 33% will include all padding etc and there is no need to alter the width as border box accounts for this .... here is some browser compatibility options as well!
这意味着您引用的 33% 宽度将包括所有填充等，并且不需要更改宽度，因为边框框会考虑到这一点......这里还有一些浏览器兼容性选项！
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
回答by Tautvydas
Done this in such way:
以这种方式完成此操作：
<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>
回答by Akira Dawson
If I'm reading right, you want the 3 divs to be 33% of its parent div. 33.3% x 3 = 100% (close enough) but if you want padding in you have to reduce the percentage of the divs. for example having the 3 divs at 30% (30% x 3 = 90%) allows you to have 10% le-way, so you can each div to have 3.33% of padding or however it is you want to allocate it :)
如果我没看错，您希望 3 个 div 为其父 div 的 33%。33.3% x 3 = 100%（足够接近）但如果你想要填充你必须减少 div 的百分比。例如，将 3 个 div 设置为 30% (30% x 3 = 90%) 允许您有 10% 的余量，因此您可以每个 div 拥有 3.33% 的填充，或者您想分配它:)
回答by jhunlio
try this not the perfect but maybe this help
试试这不是完美的，但也许这有帮助
html
html
<div class="wrapper">
<div class="box">1</div>
<div class="box">2</div>
<div class="box noMarginRight">3</div>
</div>
css
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}
working Demo
工作演示
