Question

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

当屏幕“狭窄”（如肖像中的移动设备）时，我有3个具有此布局的div。

BB
AA
AA
CC

但是，这是不可能的事情，我希望它们在窗口较宽时（如桌面浏览器或横向移动设备）进行布局：

AABB
AACC

这可能只是使用CSS，还是我需要使用jquery和东西？

这让我发疯了。：P

谢谢！

Answer 1

如果您只是浮动元素，它应该或多或少地自动运行，@media查询就在您身边。但是如果你想在任何宽度上对奇数元素（从零开始计数）中断，那也不是问题：

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

请注意，如果屏幕足够小以使所有元素垂直堆叠，则无效。

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

工作demo

希望这能帮到你......

DIV在中间有垂直布局，div在左边有水平布局

2 个答案: