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

Question

我无法使用浮动元素来处理事情......这是我正在尝试做的事情：

当屏幕“窄”时，我有 3 个具有此布局的 div（如纵向移动设备）

BB
AA
AA
CC

但是，这是不可能的事情，当窗口更宽时（如桌面浏览器或横向移动），我希望它们像这样布局：

AABB
AACC

这可能仅使用 CSS 还是我必须使用 jquery 之类的东西？

这真让我抓狂。:p

谢谢 ！

Answer 1

If you just float the elements it should work more or less automatically, and @media queries are at your side. However if you want a break on the odd elements (counting from zero) at any width, that's not a problem either:

div:nth-child(odd) {
    clear: both;
}

Note that this has no effect if the screen is small enough to make all the elements stack vertically.

http://jsfiddle.net/ExplosionPIlls/bBEE5/

Answer 2

这是这样的吗：

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" />

工作演示

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