css 空格时取两列,父级太窄时取一列

disho6za  于 2023-03-25  发布在  其他
关注(0)|答案(1)|浏览(124)

我有两组段落,我称之为左和右-见问题末尾的HTML。当它们的 parent 足够宽时,我希望它们并排显示,在等宽列中。当它们的 parent 窄时,我希望它们一个在另一个上面显示。
父浏览器不是整个浏览器,所以媒体查询不是一个解决方案。(这是在Vue组件中进行的,并且可能有多个这样的组件-可能具有不同的宽度和高度-同时在屏幕上。)
我尝试了一个基本的浮动方法:

<style>
.container {width:100%;border: 1px solid;margin:0.5rem;}
.left {color:#006; min-width:20rem; width:50%; float:left;}
.right {color:#060; min-width:20rem; width:50%; float:left;}
</style>

当相邻的列有空间时,这很好地工作:

当它变窄时,它确实会切换到右上方的左,但它们停留在20 rem宽度,而不是填充单列的全宽。

我见过很多使用flex或grid的解决方案,但当我尝试调整它们时,它们不起作用。例如,我发现了这个flex解决方案:

.container {width:100%;border: 1px solid;margin:0.5rem; display:flex;}
.left {color:#006;flex:max(20rem, 50% - 0.5rem)}
.right {color:#060;flex:max(20rem, 50% - 0.5rem)}

但它始终保持为两个50%列,无论父级的宽度如何。

<div class="container">
  <div class="left">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
  </div>

  <div class="right">
    <p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate...</p>
    <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>
    <p>Vivamus elementum semper nisi. Aenean leo ligula, porttitor eu, consequat vitae, aenean vulputate eleifend tellus.</p>
  </div>
</div>
ie3xauqp

ie3xauqp1#

您需要在父段上添加flex-wrap属性以允许子段换行,然后将子段上的flex设置为1(这将填满左右段落的剩余空间,并创建2个偶数列)。然后将min-width设置为20 rem(一种要换行的断点)。

.container {
  width:100%;
  border: 1px solid;
  display: flex;
  flex-wrap: wrap;
}
.left {
  color:#006;
  flex: 1;
  min-width: 20rem;
}
.right {
  color:#060;
  flex: 1;
  min-width: 20rem;
}

您还可以使用容器上差距属性在元素之间创建一个空间,不要让它们太靠近。

相关问题