Question

所以我遇到了这个问题：我一直在研究一个由3个div组成的网站的“响应性”（列 - 让我们称之为'A'，'B'和'C'，全部高96％） +一个页脚。 A和C属于同一类，宽度为35％。 B列宽30％，但我也将它的最小宽度设置为200px。当我缩小浏览器以使B列宽200px并且无法获得任何更薄并且不断缩小时，C列会跳下来。我试图让它们填充没有固定的最小宽度和最大宽度为35％，而写入最大宽度：35％;不足以实现它。有什么建议？提前谢谢！

Answer 1

HTML

<div class="container">
  <div class="col colA">A</div>
  <div class="col colB">B</div>
  <div class="col colC">C</div>
</div>

CSS

.container{
  display: flex;
  justify-content: space-between;
}
.col{
  height: 96%;
}
.colA, .colC{
  background-color: blue;
  flex-basis: 35%;
}
.colB{
  min-width: 200px;
}

小提琴：https://jsfiddle.net/4nhvtbpe/

CSS：百分比宽度与固定的最小宽度相结合会导致div不适合一行

1 个答案: