开发者

Fit 5 div horizontally

I want to position five equal sized div containers horizontally, next to each other. So far, I am setting the position and sizes explicitly:

#container1{position:absolute; top:0px; margin:20px 0 0 5px; width:260px; height:90%; padding:0 10px;}
#container2{position:absolute; top:0px; margin:20px 0 0 270px; width:260px; height:90%; padding:0 10px;}
#container3{position:absolute; top:0px; margin:20px 0 0 535px; width:260px; height:90%; padding:0 10px;}
#container4{position:absolute; top:0px; margin:20px 0 0 800px; width:260px; height:90%; padding:0 10px;}
#container5{position:absolute; top:0px; margin:20px 0 0 1065px; width:260px; height:90%; padding:0 10px;}

But I want users with different screen sizes to see the whole web page with开发者_如何学Goout having to scroll. I could set the width of each div to 20%, but then how would I position them?

Thank you very much


You can use floating position i.e. http://jsfiddle.net/aK7Lv/

Markup

<div class="floating">1</div>
<div class="floating">2</div>
<div class="floating">3</div>
<div class="floating">4</div>
<div class="floating">5</div>

Css:

.floating{
    float:left;
    width:20%;
    background:red;
    height:200px;
}


Just use the float property.

#yourDiv
{
    margin:0;
    padding:0;
    width:20%;
    float:left;
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜