具有四个浮动div的响应式布局 [英] Responsive layout with four floating divs

问题描述

如何在代码中实现响应式布局?

How do I achieve a responsive layout in my code?

我有四个高度不同的div.较小屏幕的布局符合预期.

I have four divs with different heights. The layout for the smaller screen is as expected.

对于较大的屏幕，我想将第二个(蓝色)和第四个(棕色)div浮动到左侧，将第一个(红色)和第三个(绿色)div浮动到右侧，如图所示.

For the larger screen, I want to float the second (blue) and forth (brown) divs to the left and the first (red) and third (green) divs to the right, as shown in the image.

这是我的代码:

CSS

.wrapper {
    border: 2px solid;
    padding: 10px;
    min-height: 300px;
}
.first-div {
    border: 2px solid red;
    height: 80px;
    margin-bottom: 10px;
}
.second-div {
    border: 2px solid blue;
    height: 200px;
    margin-bottom: 10px;
}
.third-div {
    border: 2px solid green;
    height: 180px;
    margin-bottom: 10px;
}
.forth-div {
    border: 2px solid brown;
    height: 100px;
}
@media (min-width: 892px) {
.first-div {
    float: right;
    width: 500px;
    }
.second-div {
    float: left;
    width: 280px;
}
.third-div {
    clear: both;
    float: right;
    width: 500px;
}
.forth-div {
    clear: both;
    float: left;
    width: 280px;
}
}
h4 {
    text-align: center;
}
.clear-both {
    clear: both;
} 

HTML

<div class="wrapper">

<div class="first-div"><h4>First Div</h4></div>

<div class="second-div"><h4>Second Div</h4></div>

<div class="third-div"><h4>Third Div</h4></div>

<div class="forth-div"><h4>Forth Div</h4></div>

<div class="clear-both"></div>

</div> 

推荐答案

我建议 flex 解决方案.我在桌面版本上根据需要排列了块.另外，我删除了< div class ="clear-both"></div> .因为通过指定 width:90％足以腾出可用空间.屏幕宽度为 892px 时，将触发媒体查询.

I advise the solution to flex. I arranged the blocks as you need on the desktop version. Also, I removed <div class="clear-both"></div>. Because it is enough to make the free space by specifying the width: 90%. At a screen width of 892px, a media query is triggered.

块变得敏感！希望你喜欢.

Blocks become responsive! Hope you like it.

.wrapper {
    border: 2px solid;
    padding: 10px;
    min-height: 300px;
}

.container {
    display: flex;
    flex-flow: wrap;
    flex-direction: column;
    gap: 10px;
    width: 90%;    
    height: 300px;
}

.container div {
  box-sizing: border-box;
  width: calc((100% / 2) - (10px / 2));
  flex: 1 0 auto;
}

.first-div {
    border: 2px solid red;
    height: 80px;
    order: 3;
}

.second-div {
    border: 2px solid blue;
    height: 200px;
    order: 1;
}

.third-div {
    border: 2px solid green;
    height: 180px;
    order: 4;
}

.forth-div {
    border: 2px solid brown;
    height: 80px;
    order: 2;
}

h4 {
    text-align: center;
}

@media (max-width: 892px) {
  .container {
      width: 100%;
      height: auto;
  }
  
  .container div {
      width: 100%;
      order: unset;
  }
}

<div class="wrapper">
 <div class="container">
  <div class="first-div"><h4>First Div</h4></div>
  <div class="second-div"><h4>Second Div</h4></div>
  <div class="third-div"><h4>Third Div</h4></div>
  <div class="forth-div"><h4>Forth Div</h4></div>
 </div>
</div>

这篇关于具有四个浮动div的响应式布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！