html – 如果窗口变小,则移动中间div

2023年3月9日 225次阅读

我有三个div并排.如果浏览器窗口变小,我希望中间div在第一个div下移动,右边div移动到“中间”.

为了更好地理解,我做了以下概述

有人可以告诉我你是怎么做到的吗？

最佳答案 这
jsfiddle应该让你开始.我分叉了Candlejack的小提琴,试图提供一个只有css的解决方案.

基本上你把第二个div放在最后：

<section id='container'>
  <div id='box-1' class='myBox'>1</div>
  <div id='box-3' class='myBox'>3</div>
  <div id='box-2' class='myBox'>2</div>
</section>

然后浮动div-1和div-2,而div-3浮动,div-1和div-3显示：block;而div-2显示：inline-block;

#container { display:inline-block; width:100%; padding: 0.5em 0; border: 1px solid black;}
.myBox { display:inline-block; min-height: 100px; width:300px; margin: 0.5em 0 0.5em 3%; float:left; display: block; }
#box-1 { border:1px solid blue;}
#box-2 { border:1px solid red; display: inline-block; float: left;}
#box-3 { border:1px solid green;float:right;}
点赞