如何解决具有弹性列方向的 3 列布局
我正在尝试构建使用 React 映射的项目的视图。目标是具有 3 列布局,其中项目按列方向排列。每个面板内部都有一个隐藏的 div,一旦单击面板,该 div 就会展开。这个想法是,这只会将该列中的内容向下推。
我已经尝试过网格版本,目前正在尝试使用百分比的传统 row,col
flex 属性进行引导。
为了方便起见,我举了两个例子,只是使用 jquery 来模拟点击功能。
首先使用网格:https://jsfiddle.net/lharby/vmaut95L/
基本CSS:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 2em 2em;
grid-auto-flow: column;
}
这里的问题是当您单击带有隐藏内容的项目(面板 3)时,所有面板都会展开到相同的大小。
这是引导程序版本:https://jsfiddle.net/lharby/u83L6tph/
这更好,但是当我将 flex 方向更改为列时,所有内容都出现在一列中,左对齐是 33% 宽度 (col-md-4
)。这是使用标准引导 css,如小提琴中所示。
标记类似,但使用更多引导实用程序类:
<div class="row exclusive-offers-wrapper">
<div class="col-md-4 mx-n1 p-4">
<div class="item">
</div>
</div>
...
解决方法
这不是一个完整的答案,但它确实满足了几个要求。我开始检查 Bootstrap 4 Cards:https://getbootstrap.com/docs/4.0/components/card/#card-columns
似乎使用一些非常简单的标记就可以创建砖石风格的布局。现在唯一的问题是,当我点击其中一张卡片以显示隐藏内容时,其中一些卡片可能会跳来跳去(点击小提琴中的第一项)。
我在这里做了一个 jsfiddle:https://jsfiddle.net/lharby/avfpq1sr/
基本标记:
<div class='card-columns'>
<div>
<div class='card item'>
<h4>A heading</h4>
<div class="hidden">
<p class="mt-4 mb-5">Save up to 20% off* your business insurance thanks to....</p>
<a href="https://www.goodlight.co.uk/wp-content/uploads/2017/07/goodlight-commercial-led-lighting.png" title="View" class="sc-pFZIQ iVCQdF cta btn-primary" target="_blank" rel="noopener noreferrer">View</a>
</div>
</div>
</div>
<div class='card item'>
<div>
...
</div>
</div>
</div>
我尝试在隐藏内容上使用 display:none
和 height: 0
而不是隐藏的 overflow: hidden
,但结果相同。
如果有人有这方面的经验,我想听听。我会看看我是否可以更新问题中的标签。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。