Question

我在主div内并排有2个div。让我们说 - left_div＆amp; right_div。当浏览器处于全屏模式时 - left_div为60％，right_div为宽度的40％（因为，main_div为100％宽度）。

现在，如果我恢复浏览器窗口并减小其宽度 - 而不是div在彼此之下，但仍然保持与60％相同的百分比＆amp; 40％的屏幕。

我想要的是，如果浏览器宽度低于一定数量，则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

检查一下这可能会对您有所帮助Extension

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并减少错误行为的可能性。随着时间的推移。

如何使垂直div在全屏幕中水平移动

3 个答案: