根據瀏覽器窗口大小顯示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

回答

相關問題