当前位置 : 主页 > 网页制作 > css >

css – 具有百分比宽度的3个div

来源:互联网 收集:自由互联 发布时间:2021-06-13
让我们说,我有宽度为65%的div,在div中我需要再创建3个div,它们在同一行,相同的大小但是大小应该是%,并且在div和中心div之间应该有10px的间隙.有什么建议? 到目前为止,我有以下代码:
让我们说,我有宽度为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>
这是一个更多的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/

网友评论