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;
}
精彩评论