如何解决带有可扩展项的2列网格布局的CSS
给出这样的HTML结构...
<div class="container">
<div class="item">
<img />
<button>Toggle</button> <!-- toggles below area open/close -->
<div style="display:none;">
<div class="sub-item">Sub item 1</div>
<div class="sub-item">Sub item 2</div>
<div class="sub-item">Sub item 3</div>
<div class="sub-item">Sub item 4</div>
</div>
</div>
<div class="item">
<img />
<button>Toggle</button> <!-- toggles below area open/close -->
<div style="display:none;">
<div class="sub-item">Sub item 1</div>
<div class="sub-item">Sub item 2</div>
<div class="sub-item">Sub item 3</div>
<div class="sub-item">Sub item 4</div>
</div>
</div>
<div class="item">
<img />
<button>Toggle</button> <!-- toggles below area open/close -->
<div style="display:none;">
<div class="sub-item">Sub item 1</div>
<div class="sub-item">Sub item 2</div>
<div class="sub-item">Sub item 3</div>
<div class="sub-item">Sub item 4</div>
</div>
</div>
<!-- will contain a variable number of item divs -->
</div>
如何使用CSS网格或flexbox使网格显示并像此处提供的图片一样工作?我一直在尝试flexbox和grid的不同变体,但是当该项目下面的“抽屉”打开时,我无法使其正常运行。总是为下一个项目留一个大空白。
我有能力根据需要更改HTML结构。
感谢您的任何建议或帮助
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。