html - 在没有包装的情况下将一些 float 元素堆叠在一起

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>