jquery - 垂直布局中间的DIV，水平布局左边的div

Question

我无法使用 float 元素...这是我正在尝试做的事情:

当屏幕“窄”时(就像纵向的手机)，我有 3 个具有这种布局的 div

BB
AA
AA
CC

但是，这是不可能的事情，我希望它们在窗口较宽时(如桌面浏览器或横向移动设备)像这样布局:

AABB
AACC

仅使用 CSS 是否可行，还是我必须使用 jquery 之类的东西？

这让我发疯。 :p

谢谢!

Answer 1

这看起来像吗

html:

<div class="wrapper">
    <div class="box">AA</div>
    <div class="box">BB</div>
    <div class="box">CC</div>
    <div class="box">DD</div>
</div>

CSS:

.wrapper {
    float:left;
    width:100%;

}
.wrapper .box {
    float:left;
    width:50%;

}
@media handheld, screen and (max-width: 320px){
    .wrapper .box {
        width:100%;  
    }
}

如果您的目标是在移动设备上工作，请将其放在 </head> 的结束标记之前

<meta name="viewport" content="width=device-width" />

工作 demo

希望对你有帮助......