具有四个浮动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屋!