Question

我有一个包含3个盒子的包装器（绿色：300px，蓝色：200px和黄色：100px）。容器的宽度可以是500px或300px。

我想要的是，在包装器宽度为500px的情况下，绿色和蓝色框对齐，黄色被隐藏（案例A）。在另一种情况下（B），如果包装纸的宽度为300px，我希望顶部有绿色框，底部对齐另外两个框。

有办法做到这一点吗？

所有高度相等（例如100px）

UPDATE ：我无法提前控制包装器的宽度。所以我需要一个适用于这两种情况的解决方案，而不是两种解决方案（每种方案都有一种情况）。

Answer 1

<!doctype html>
<html>
    <head>
        <title>Demo</title>
        <style>
            #caseA {width: 500px; float: left;}
            #caseB {width: 300px; float: left; clear: both; margin-top: 100px;}
            #caseA > div, #caseB > div {height:100px; position: relative;}

            .boxGreen {background-color:green; width: 300px; float: left; z-index: 3;}
            .boxBlue {background-color:blue; width: 200px; float: right; z-index: 2;}
            .boxYellow {background-color:yellow; width: 100px; float: right; margin-left:-100px; z-index: 1;}
        </style>
    </head>
    <body>
        <div id="caseA">
            <div class="boxGreen"></div>
            <div class="boxBlue"></div>
            <div class="boxYellow"></div>
        </div>

        <div id="caseB">
            <div class="boxGreen"></div>
            <div class="boxBlue"></div>
            <div class="boxYellow"></div>
        </div>
    </body>
</html>

Answer 2

这个怎么样：

<style>
    #wrapper{
        overflow:hidden;
    }
    .wide{
        width:500px;
        height:100px;
    }
    .narrow{
        width:300px;
        height:200px;
    }
    #green{
        width:300px;
        height:100px;
        background-color:Green;
        float:left;
    }
    #blue{
        width:200px;
        height:100px;
        background-color:Blue;
        float:right;
    }
    #yellow{
        width:100px;
        height:100px;
        background-color:Yellow;
        float:left;
    }
</style>


<div id="wrapper" class="wide">
    <div id="green">&nbsp;</div>
    <div id="blue">&nbsp;</div>
    <div id="yellow">&nbsp;</div>
</div>

然后，当您需要切换样式时，可以来回交换2个类。

Answer 3

我想你想要this之类的东西？

更新：Now使用@media querys。

PS。调整小提琴html painel的大小以查看结果。

如果它不适合隐藏DIV

3 个答案: