将一些浮动元素堆叠在一起而不包装

我有一个响应式网站，其中包含一些具有float: left css的元素。对于较小的屏幕，我想将第二个元素移到第一个元素下面。将一些浮动元素堆叠在一起而不包装

HTML：

<div>A</div> 
<div>B</div> 
<div>C</div>

CSS：

div { 
    float: left; 
}

图片：上面的红线是当前布局，它下面的小屏幕所需的布局。 div的大小或对齐方式不需要改变。

我能做到没有一个新的div包装的div A和B这样的效果？

来源

2016-03-04 KWeiss

没有包装你不能。 – dippas

您可能想看看[flexbox]（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）。我没有足够的知识来提供完整的答案，但我曾经有类似的需求。 – GigiSan

更新：您可以使用clear:left股利B关于然后使用translate-Y让顶部的C DIV;

body { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: honeydew; 
 
} 
 

 
div { 
 
    display: inline-block; 
 
    padding: 36px; 
 
} 
 

 
#a { 
 
    float: left; 
 
    background-color: tomato; 
 
} 
 

 
#b { 
 
    float: left; 
 
    clear:left; 
 
    background-color: gold; 
 
} 
 

 
#c { 
 
    float: left; 
 
    background-color: skyblue; 
 
    -webkit-transform: translateY(-100%); 
 
    -ms-transform: translateY(-100%); 
 
    transform: translateY(-100%); 
 
}

<div id=a>1.</div> 
 
<div id=b>2.</div> 
 
<div id=c>3.</div>

来源

2016-03-04 12:01:52

谢谢你的回答！可悲的是，它只有在div C没有'float：left'的情况下才有效。 – KWeiss

@KWeiss通过使用媒体查询，你可以在屏幕尺寸足够小的时候删除C的'float：left'属性 –

**更新**相同的结果，但现在所有的div都有'float：left' –

我不知道，如果你有兴趣在一些jQuery的，但让我提供一点粗糙例如，像结构化编程和可肯定会清理干净，但这可以让您添加一些类并动态重新排列元素，而不必触摸HTML代码。

<div class="first">A</div> 
<div class="second">B</div> 
<div class="third">C</div>

CSS：

.first { 
    float: left; 
    width: 100%; 
} 

.second { 
    float: left; 
    width: 100%; 
} 

.third { 
    float: left; 
    width: 100%; 
} 

#left-row { 
    width: 50%; 
    float: left; 
} 

.need-wrapper-right { 
    width: 50%; 
    float: right; 
}

的jQuery

jQuery(document).ready(function($) { 

    if ($(window).width() < 800) { 
    $(".second").detach().insertAfter(".first"); 
    $(".first").addClass("need-wrapper-left"); 
    $(".second").addClass("need-wrapper-left"); 
    $(".third").addClass("need-wrapper-right"); 
    $(".need-wrapper-left").wrapAll("<div id='left-row'>"); 
    $(".second").detach().insertAfter(".first"); 
    $(".third").insertAfter($("#left-row")); 
    } 

});

检查Codepen演示（该代码被设置为重新排列下面800像素元件）。你可以查看关于.detach（），addClass（）和其他函数的jQuery文档。

编辑：另外，你应该使用媒体查询，所以这些CSS类只适用于较低的分辨率。

来源

2016-03-04 12:49:11

将一些浮动元素堆叠在一起而不包装

回答

相关问题