水平适合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; }更多推荐
发布评论