根据浏览器窗口大小显示Divs

我有一个容器div，里面有很多其他的div。容器宽度为1100px，它位于浏览器窗口的中间。容器内的其他div是并排的。在这个图像的例子中，我展示了三个div，但可以更多地在它们之上（divD，divE等）。根据浏览器窗口大小显示Divs

如果浏览器窗口大小了一点，但不会削减在div容器，没有什么变化。

的问题是，当浏览器窗口rezied了很多，并切断div容器。

我想要的是，在这种情况下，调整div容器宽度以适应浏览器窗口，使容器内的div跳下到下一行，像这样：

我该怎么做？也许bootstrap在这里很有用？

我至今HTML：

<div id="container"> 
    <div class="inside-div"> 
    </div> 
    <div class="inside-div"> 
    </div> 
    <div class="inside-div"> 
    </div> 
    <div class="inside-div"> 
    </div>

.inside-div { 
    width: 80px; 
    height: 100px; 
    background: green; 
    margin-left: 35px; 
    margin-top: 30px; 
    display: inline-block; 
} 

#container { 
    background: red; 
    width: 400px; 
    height: 500px; 
    margin: 0 auto; 
}

这里是一个演示：https://jsfiddle.net/b8do1xs8/

来源

2015-09-29 Pedro Estevao

您允许使用JavaScript吗？ –

是的，我可以使用Javascript。 –

你的容器改变

#container { 
    background: red; 
    width:100%; 
    max-width: 400px; 
    height: 500px; 
    margin: 0 auto; 
}

最大宽度有它停在400px（或1100px）; 宽度：当它小于最大宽度时适合在屏幕上使用它100％

来源

2015-09-29 14:46:35 Pepe

感谢它的工作。但你可以看看这个小提琴https://jsfiddle.net/b8do1xs8/5/？如果我在右侧有这个其他的div（蓝色背景），我怎么能让这个div不会在窗口大小上下移，而是让内容div（红色背景）减少？ –

@PedroEstevao你的意思是一种侧边栏？看看http：// clubmate。fi/100-height-columns-fixed-width-sidebar-pure-css-solutions-to-commons-fluid-layout-problems/ 另外，你应该更经常使用class而不是id。 https://css-tricks.com/the-difference-between-id-and-class/ – Pepe

是的，这很好，谢谢。 –

您想为容器提供一个百分比而不是固定宽度。尝试

#container { 
    background: red; 
    width: 90%; 
    height: 500px; 
    margin: 0 auto; 
}

来源

2015-09-29 14:46:41 AtheistP3ace

您可以使用max-width和width性能的结合，为.container元素。我已经更新了小提琴。像这个 -

.inside-div { 
 
    width: 80px; 
 
    height: 100px; 
 
    background: green; 
 
    margin-left: 35px; 
 
    margin-top: 30px; 
 
    display: inline-block; 
 
} 
 

 
#container { 
 
    background: red; 
 
    width: 100%; 
 
    max-width: 400px; 
 
    min-height: 500px; 
 
    margin: 0 auto; 
 
}

<div id="container"> 
 
    <div class="inside-div"> 
 
    </div> 
 
    <div class="inside-div"> 
 
    </div> 
 
    <div class="inside-div"> 
 
    </div> 
 
    <div class="inside-div"> 
 
    </div> 
 
</div>

来源

2015-09-29 14:50:57

使用最大宽度，而不是宽度将提高小窗口浏览器的处理。

#container { 
    background: red; 
    max-width: 400px; 
    height: 500px; 
    margin: 0 auto; 
}

来源

2015-09-29 15:09:50

根据浏览器窗口大小显示Divs

回答

相关问题