4

可以说，我有宽度为 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>
4

6 回答 6

8

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

于 2013-03-14T00:17:50.073 回答
1

这是我能想到的最接近的解决方案：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

于 2013-03-14T00:09:21.330 回答
1

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

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

这是关于盒子尺寸的有用链接！

于 2013-03-14T00:14:34.040 回答
0

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

于 2013-03-14T00:03:05.000 回答
0

这样做是这样的：

    <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>
于 2013-03-14T00:11:49.943 回答
-1

试试这不是完美的，但也许这有帮助

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}

工作演示

于 2013-03-14T00:25:41.380 回答