我有一个包含 3 个框的包装器（绿色：300 像素，蓝色：200 像素和黄色：100 像素）。容器的宽度可以是 500 像素或 300 像素。
我想要的是，在包装器的宽度为 500 像素的情况下，绿色和蓝色框对齐，黄色框被隐藏（案例 A）。在另一种情况（B）中，如果包装器的宽度为 300px，我希望绿色框在顶部，而其他 2 个框在底部对齐。
有没有办法做到这一点？
所有高度都相等（例如 100px）
更新：我无法提前控制包装器的宽度。所以我需要一个适用于这两种情况的解决方案，而不是 2 种解决方案（每种适用于 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>
【讨论】：
这个怎么样：
<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"> </div>
<div id="blue"> </div>
<div id="yellow"> </div>
</div>
然后你可以在需要切换样式时来回交换这两个类。
【讨论】：