logo标签列表

砖石布局采用Flexbox

cssflexboxmasonry
4

我需要一个像这样的砌体网格：

砌体网格

是否可以仅使用flexbox或其他方式来实现？不想使用Masonry库或其他库或框架。

CSS的column-count怎么样？看起来对你有帮助吗？ - StardustGogeta
如果盒子的高度已知，那么使用 flexbox 是可能的。 - kukkuz
是的，这是可能的，看这里：https://codepen.io/dudleystorey/pen/eAqzk - Millard
1
不是很容易也不是普遍的。Flexbox有“项目”，可以放置在行和列中，而砌体则有可以以任意方式拼合在一起的瓷砖。 - user663031
@TomMillard 这是一种特定的、有些受限的砌体版本，仍然强制实行列结构。 - user663031
2个回答
1

<!doctype html>
<html>
   <head>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
   </head>
   <body>
      <section class="pad-40 " style="background-color: #f1f1f1;height: 546px">
         <div class="container">
            <div class="row">
               <div class="col-md-8">
                  <img src="https://dummyimage.com/600x220/aaa/fff" width="100%">
               </div>
               <div class="col-md-4">
                  <img src="https://dummyimage.com/400x600/aaa/fff" width="100%">
               </div>
               <div class="col-md-4" style="top: -222px;">
                  <img src="https://dummyimage.com/400x255/aaa/fff" width="100%">
               </div>
               <div class="col-md-4" style="top: -222px;">
                  <img src="https://dummyimage.com/400x255/aaa/fff" width="100%">
               </div>
               <div class="col-md-4 ">
               </div>
               <div style="clear:both;"></div>
            </div>
         </div>
      </section>
   </body>
</html>

这里需要使用内联样式吗？因为在缩小屏幕尺寸时，布局会变得混乱。 - m4n0
0

我相信CSS网格布局可以帮你实现这个功能。

CSS网格布局为Web带来了一个二维布局工具，具有在行和列中布置项目的能力。 CSS Grid可用于实现许多不同的布局。它擅长将页面分成主要区域，或者使用HTML基元素定义控件部分之间的大小，位置和层次关系。

像表格一样，网格布局使作者可以将元素对齐到列和行中。但是，与表格不同，网格布局没有内容结构，因此可以实现各种不可能在表格中实现的布局。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

这是一个有趣而简单的游戏，可以帮助您学习和理解CSS网格。

http://cssgridgarden.com/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接