主页 / 问题 / 682046
Accepted
Tima
Asked:2020-06-21 21:22:17 +0000 UTC2020-06-21 21:22:17 +0000 UTC

响应式块布局

  • 772

有一些html

<body>
    <div class="div"></div>
    <div class="div"></div>
</body>

这两个块在同一行上。第一个块的最小长度为 400px，第二个块的最小长度为 200px。两者的最大长度应为100%。如何做到这一点，当达到最小长度时，不适合的块被包裹到下一行。并且前一个块占据了第一行剩余空间的 100%。同时，转移过来的也占了一条新线上100%的空位。

请注意，可能不会有两个块。提前致谢。

在此处输入图像描述

在此处输入图像描述

html

1 个回答

  1. Best Answer

    你可以使用 flexbox 解决它（如果有的话，设置它flex-grow来调整增长比例）：

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

.flex__item {
  height: 40px;
}

.flex__item--one {
  min-width: 200px;
  background-color: red;
  flex-grow: 1;
}

.flex__item--two {
  min-width: 400px;
  background-color: yellow;
  flex-grow: 2;
}
    <div class="flex">
  <div class="flex__item flex__item--one"></div>
  <div class="flex__item flex__item--two"></div>
</div>

    • 0

相关问题