如何在全屏模式下使垂直div變為水平

Question

我在主div內並排有2個div。 讓我們說-left_div和right_div。 當瀏覽器處於全屏模式下時-left_div為60％，right_div為40％寬度（因為main_div為100％寬度）。

現在，如果我還原瀏覽器窗口並減小其寬度，則div會彼此靠攏，但仍保持與屏幕60％和40％相同的百分比。

我想要的是，如果瀏覽器寬度低於某個特定值，則div彼此之間也將低於div，並且還會填滿整個屏幕寬度，即成為完整的瀏覽器寬度。

我該怎么做？ 我需要使用JavaScript還是jQuery？

Answer 1

HTML：

<div class="mainDiv">
    <div class="left">
        test
    </div>
    <div class="right">
        test2
    </div>
</div>

CSS：

div.main
{
    width:100%;
}

div.left
{
    width:60%;
    background-color:red;
    float:left;
    height:100px;
}

div.right
{
    width:40%;
    background-color:blue;
    float:left;
    height:100px;
}

@media (max-width: 350px) {
    div.left, div.right
    {
        float:none;
        width:100%;
    } 
}

Answer 2

檢查這一次，可以幫助你在這里演示

的HTML

<div class="left-div">Left</div>
<div class="right-div">Right</div>

的CSS

.left-div{width:60%;height:100px;float:left;background-color:#000;color:#fff} 
.right-div{width:40%;height:100px;float:right;background-color:#333;color:#fff}
@media (max-width: 479px) { 
.left-div, .right-div{float:none;width:100%;} 
}

Answer 3

您的問題一直是很多人的問題。 雖然您可以編寫自己的CSS，但應考慮使用具有不同DPI，不同設備和不同瀏覽器的屏幕。 但是Bootstrap允許您輕松管理這些情況。

http://getbootstrap.com/

在頁面中包含引導程序后，您可以擁有兩個這樣的DIV

http://jsfiddle.net/Gt25L/119/

<div class="col-md-4"></div>
<div class="col-md-8"></div> 

還請看教程，它們會指導您完成如何使用引導程序制作響應式網站。 您將不需要任何JavaScript。 Bootstrap僅基於CSS。

這樣一來，您需要維護的CSS更少，並且隨着時間的推移，在不同的瀏覽器和設備中出現錯誤行為的機會也更少。