水平适合5 div(Fit 5 div horizontally)

水平适合5 div(Fit 5 div horizontally)

我想将五个相等大小的div容器水平放置，彼此相邻。 到目前为止，我明确地设置了位置和大小：

#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;}

但我希望不同屏幕尺寸的用户无需滚动即可查看整个网页。 我可以将每个div的宽度设置为20％，但那我将如何定位它们？

非常感谢你

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 without having to scroll. I could set the width of each div to 20%, but then how would I position them?

Thank you very much

最满意答案

您可以使用浮动位置，即http://jsfiddle.net/aK7Lv/

标记

<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; }

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; }