我有两组段落,我称之为左和右-见问题末尾的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>
1条答案
按热度按时间ie3xauqp1#
您需要在父段上添加flex-wrap属性以允许子段换行,然后将子段上的flex设置为1(这将填满左右段落的剩余空间,并创建2个偶数列)。然后将min-width设置为20 rem(一种要换行的断点)。
您还可以使用容器上差距属性在元素之间创建一个空间,不要让它们太靠近。