1

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

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

有没有办法做到这一点？

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

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

4

3 回答 3

2 
<!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>
于 2012-06-28T20:29:59.267 回答
1

我想你想要这样的东西？

更新：现在使用@media 查询。

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

于 2012-06-28T20:29:33.557 回答
1

这个怎么样：

<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 个类。

于 2012-06-28T20:19:03.983 回答