代码之家 › 专栏 › 技术社区 › Programmingjoe

如何在列中创建浮动元素?[复制品]

reactjs css

-1

Programmingjoe · 技术社区 · 7 年前

这个问题已经有了答案:

CSS-only masonry layout 1答

我的应用程序中有一个3列布局,其中列中的项目都是等宽的,但高度不同。我希望列中的项目占用每列的所有可用空间。附上图像。

关于如何使用CSS有什么想法吗?给定这样的HTML布局:

<div className="container">
   <div className="item">
   <div className="item">
   <div className="item">
   <div className="item">
   <div className="item">
   <div className="item">
   ...
</div>

我在考虑在React中使用JSX来实际创建3个列,但我认为可能有一种简单的CSS方法来实现这一点。

1 回复 | 直到 7 年前

Programmingjoe 7 年前

感谢@divy3993的链接: https://w3bits.com/labs/flexbox-masonry/2/ 一旦你意识到创造的术语是“砖石结构”,谷歌就会更容易理解这一点。

父容器( .container 在我的示例中)具有以下样式:

.masonry { 
  display: flex;
  flex-flow: column wrap;
  max-height: 800px;
  margin-left: -8px; /* Adjustment for the gutter */
  width: 100%;
}

砖也应该有点间距( .item 在我的例子中:

.masonry-brick {
  margin: 0 8px 8px 0; /* Some gutter */
}

这个解决方案相当有限 max-height 值是必需的,因为项基本上是逐列包装的。然而,一个简单的ish修复方法是添加计算项目高度的javascript。可以使用各种方法来实现这一点。

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前