前端之家

  1. 首页
  2. 问答

我们可以将2个div并排漂浮在它们下面吗？

• 问答

我要按照以下屏幕宽度排列3个div：

对于screen-width of < 500px的安排应如下：

我们可以将2个div并排漂浮在它们下面吗？

对于screen-width of > 500px的安排应如下：

我们可以将2个div并排漂浮在它们下面吗？

我试图在大于500像素的屏幕上实现这一目标，但是我不知道如何使用相同的代码来实现

我的疑问是，我可以使用同一段代码来获得这两种安排，还是有其他方法？可以使用flexbox解决问题吗？

以下是代码段：

.container {
  display: flex;
}

.divA {
  flex: 0 0 40%;
  align-self: flex-end;
}

.container-2 {
  display: flex;
  flex: 0 0 60%;
  flex-direction: column;
}
<div class="container">
  <div class="divA">
    A
  </div>
  <div class="container-2">
    <div class="divB">
      B
    </div>
    <div class="divC">
      C
    </div>
  </div>
</div>

a946527083 回答：我们可以将2个div并排漂浮在它们下面吗？

修改

看到您的问题更新后，mediaquerie，flex，order和创建该空白的伪指令就足够了。仍然每个.container的3个直接子代。

以整页模式运行代码段并调整浏览器的大小，将演示的断点设置为700px。

* {
  box-sizing: border-box;
  margin: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.divA {
  background: lightgreen;
}

.divB {
  background: lightblue;
}

.divC {
  background: rgb(255,255,0);
}

.container>div,.container:before {
  flex: 1;
  min-width: 40%;
  padding: 1em 0;
  text-align: center;
}

@media (min-width: 700px) {
  /* upadte here the px value where you swhitch to happen . 500px */
  .divA,.divC {
    order: 1;
    flex: 0 1 40%;
  }
  .container .divB,.container .divC {
    flex: 0 1 60%;
  }
  .container:before {
    content: "";
    flex: 0 1 40%;
  }
}
<div class="container">
  <div class="divA">
    A
  </div>
  <div class="divB">
    B
  </div>
  <div class="divC">
    C
  </div>
</div>

有关信息的原始答案

您可以从弹性布局切换为表格或网格布局，而每个元素都是同级对象，这里不需要额外的标记。

示例：flex / table，这将适用于浏览器仍然存在网格问题 

.container {
  display: flex;
  flex-wrap: wrap;
}

.container>div {
  flex: 1;
  border: solid;
  min-width: 40%;
}


/* set here the width where you want switching layout */

@media screen and (max-width: 600px) {
  .container {
    display: table;
    width: 100%;
    table-layout: fixed;
    ;
  }
  .divA {
    display: table-cell;
    width: 50%;
  }
<div class="container">
  <div class="divA">
    A
  </div>
  <div class="divB">
    B
  </div>
  <div class="divC">
    C
  </div>
</div>

或网格（IE的思想版本，部分支持网格，并且需要为每个孩子设置网格行/网格列或网格面积）

.container {
  display: grid;
  grid-template-columns: repeat(2,1fr);
}

.container>div {
  border: solid;
}

.divC {
  grid-row: 2;
  grid-column:1 / span 2;
}


/* set here the width where you want switching layout */

@media screen and (max-width: 600px) {
  .divC {
    grid-row: 1 / span 2;
    grid-column: 1;
  }
<div class="container">
  <div class="divA">
    A
  </div>
  <div class="divB">
    B
  </div>
  <div class="divC">
    C
  </div>
</div>

,

方法：

这可以通过使用CSS grid

来实现

如果您愿意使用网格解决方案，则需要稍微更改html结构。使用flex，这是不可能的。

解决方案：

这就是我要做的：

.container {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 200px 200px;
  grid-gap: 0;
}

.divA {
  background-color: lightgreen;
}

.divB {
  background-color: lightblue;
}

.divC {
  grid-column: 1 / span 2;
  background-color: yellow;
}

@media screen and (min-width: 500px) {
  .divA {
    grid-column: 2 / 1;
    grid-row: 2 / 2

  }
  .divB {
    grid-column: 2 / 2;
    grid-row: 1 / 1;
  }
  .divC {
    grid-column: 2 / 2;
    grid-row: 2 / 2;
  }
}
<div class="container">
  <div class="divA">
    A
  </div>
  <div class="divB">
    B
  </div>
  <div class="divC">
    C
  </div>
</div>

说明：

  • grid-template-columns可让您定义自己的列宽 网格元素，行的grid-template-rows也是如此 高度。
  • 对于每个网格元素，您可以指定它们应包含多少个元素 跨度（例如表格单元格可以跨列或行） grid-column。学到更多 here或Google 这个性质。您的divC在一列中跨越了2个元素。
  • 现在，请提高响应速度，编写媒体查询来定义您的 screen-width超过500px的样式，并重置了.divC grid-column和grid-row，并为您的.divA添加相同的内容。 （因为此元素现在连续跨越2个元素）
cssflexboxhtmlresponsive-design
本文链接：https://www.f2er.com/3166343.html

大家都在问