在没有包装的情况下将一些浮动元素堆叠在一起

Question

我有一个响应式网站，其中包含一些具有 float: left css 的元素。对于较小的屏幕，我想将第二个元素移动到第一个元素下方。

HTML:

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

CSS:

div {
    float: left;
}

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

我可以在不将 div 的 A 和 B 包装在新的 div 中的情况下实现这种效果吗？

Answer 1

更新： 您可以在 div B 上使用 clear:left 然后使用 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>

Answer 2

我不确定你是否对某些 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 上的演示（代码设置为重新排列 800px 以下的元素）。您可以查看有关 .detach()、addClass() 和其他函数的 jQuery 文档。

编辑： 此外，您应该使用 媒体查询 因此这些 CSS 类仅适用于较低的分辨率。

在没有包装的情况下将一些浮动元素堆叠在一起

Stack some floated elements on top of each other without wrapper

html

css

css-float