具有四个浮动div的响应式布局

Question

具有四个浮动div的响应式布局

htmlcss

3

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

我有四个高度不同的

。在较小的屏幕上，布局符合预期。

对于较大的屏幕，我想将第二个（蓝色）和第四个（棕色）

向左浮动，将第一个（红色）和第三个（绿色）

向右浮动，如图所示。

以下是我的代码：

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>

- Arjun Sangram

3个回答

1

我建议使用flex布局解决方案。我按照桌面版需求排列了块元素。同时，我去掉了

，因为只需指定width: 90%即可获得自由空间。在屏幕宽度达到892px时，会触发媒体查询。块元素变得响应式！希望您喜欢。

.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>

- s.kuznetsov

谢谢。这就是我在寻找的东西。 - Ocean

@Ocean，非常乐意帮忙。 - s.kuznetsov

0

这是修复后的版本，希望这就是你想要的。我稍微修改了你的html，还有css，但是我的代码很清楚，如果你有任何问题，请随时问！

小提示：

不要使用float属性，它非常糟糕且已过时，使用flex或css grid进行响应式设计！:)

.wrapper {

  border: 2px solid;
  padding: 10px;
  min-height: 300px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;

}

.secondForth{

    width : 40%;

}

.firstThird{

  width : 40%;

}

.allFour{

  display: none;

}





.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 (max-width: 892px) {

  .secondForth, .firstThird{

    display: none;

  }

  .allFour{

    display: block;
    width: 100%;

  }

}


h4 {

  text-align: center;

}

<div class="wrapper">


    <div class="secondForth">

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

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

    </div>


    <div class="allFour">

      <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 class="firstThird">

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

    </div>

   
    
  </div>

- Just Alex

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user14697373 · Accepted Answer

您只需要在代码中做出一些更改。首先，您需要更改DIV的顺序（哪个DIV先出现，哪个后出现等）。

其次，您需要从CSS中删除一些float和clear属性。我在下面附上了一个可运行的代码片段，对您的代码进行了一些更改：（请确保在“全屏”视图中查看结果，否则它将显示较小屏幕的结果）。

.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;
    clear: right;
  }
  .second-div {
    width: 280px;
    clear: left;
  }
  .third-div {
    clear: right;
    float: right;
    width: 500px;
  }
  .forth-div {
    float: left;
    width: 280px;
    clear: left;
  }
}

h4 {
  text-align: center;
}

.clear-both {
  clear: both;
}

<!DOCTYPE html>
<html>

<body>

  <div class="wrapper">

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

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

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

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

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

  </div>

</body>

</html>