相关疑难解决方法(0)

我想在CSS中实现网格效果,其中元素的大小都相同但高度不同.我希望下面的元素总是在底部的50px,无论下一个是什么.

我试过浮子,但那个错误.所以我尝试使用Flex,但它仍然没有做我想要的.

.container
  display: flex
  flex-wrap wrap
  align-content flex-start
  align-items flex-start

我想要的是什么:

是)我有的:

I've listed the div which has a fixed height like masonry. The code works in Firefox, but not in Chrome. The reference code I've referred is CSS-only masonry layout.

Chrome Browser Mozila Firefox Browser

.container {
  width: 1080px;
  margin: 0 auto;
}

.grid-container {
  display: grid;
  grid-auto-rows: 1px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  font-size: 50px;
  margin: 5px;
}

.grid-row-200 {
  grid-row: span 200;
}

.grid-row-225 {
  grid-row: span …

编辑\n请记住，每个单元格可以有不同的宽度和高度。这与这篇文章不同：CSS-only masonry layout，请参阅参考图片的指导线：

由放置在虚拟 5\xc3\x975 基本网格中的引导线和图块组成的大约 19 列和 17 行在两个轴上重叠。

我想要介于网格和弹性布局之间的东西。网格受到单元格大小的限制，而 flex 更强大，但（据我所知）仅限于方向。我想要不同的单元格大小，其中每 5 个单元格的宽度总和相同，并且 5 个列的总和高度相同。就像下图一样。

有没有办法使用 CSS 实现类似的布局？

这是我到目前为止所得到的一切：

HTML：

<div class="calendar">\n  <div class="day day1">1</div>\n  <div class="day day2">2</div>\n  <div class="day day3">3</div>\n  <div class="day day4">4</div>\n  <div class="day day5">5</div>\n  <div class="day day6">6</div>\n  <div class="day day7">7</div>\n  <div class="day day8">8</div>\n  <div class="day day9">9</div>\n  <div class="day day10">10</div>\n  <div class="day day11">11</div>\n  <div class="day day12">12</div>\n  <div class="day day13">13</div>\n  <div class="day day14">14</div>\n  <div class="day day15">15</div>\n …

我在包裹中有多个div,它们有不同的高度.我想左转.2个分区可以连续排列.但由于每个div都有不同的高度,所以下一行还有很多奇怪的空间.我可以移除空间并移动div吗？

请看图片:

这是代码:

<div class="wrap">
    <div class="box1">Box1 with less height.</div>
    <div class="box2">Box2 with more height.</div>
    <div class="box3">Box3 with whatever height.</div>
</div>

CSS:

.wrap{
    width:410px;
    border:1px solid red;
    overflow:hidden;
}

.box1{
    width:200px;
    height:50px;
    float:left;
    border:1px solid green;
}

.box2{
    width:200px;
    height:150px;
    float:left;
    border:1px solid blue;
}

.box3{
    width:200px;
    height:250px;
    float:left;
    border:1px solid blue;
}

JSFiddle: http ://jsfiddle.net/NsH5M/

PS.div高度不固定.这仅仅是例如. 编辑:对不起,我应该提到它无法编辑标记.

我正在尝试创建一个不使用Packery或任何JS的pinterest样式的布局。我尝试使用CSS3列，但它们垂直堆叠。

在这里查看小提琴， https://jsfiddle.net/2otpzbgt/1/

column-count: 3;

是我使用过的，卡片显示为1、6、11等。是否可以显示为1、2、3？

我要解决的目的是使用具有动态内容的网格布局，其中图像大小（高度）会变化（类似于pinterest），但是只有在事先知道图像高度的情况下，包装工才能进行布置。当您滚动时，我懒于加载图像并获取卡。

谢谢！

我想通过 flexbox.Child 元素创建砌体布局，应该按以下顺序出现，并且孩子的高度和宽度相同。我正在使用延迟加载。

1 2
3 4
5 6

我正在尝试弄清楚 CSS 网格是否能够像表格一样运行。

因此，如果我有很长的“单元格数据”（第 2 列），并且表中其他地方有可用空间，我不希望它像下图中那样换行：

我想要实现的就是这样的事情。具有较长内容的列会增长，而其他列会根据该列中的内容而缩小。

我在 CodePen 上上传了一个示例： https: //codepen.io/anon/pen/WdNJdY

.wrapper {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  background-color: #fff;
  color: #444;
  max-width: 800px;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

<div class="wrapper">
  <div class="box a">col 1</div>
  <div class="box b">col 2</div>
  <div class="box c">col 3</div>
  <div class="box d">short data</div>
  <div class="box e">a really long piece of data</div>
  <div class="box f">short data</div>
</div>

我对 CSS 网格非常陌生，所以我很好奇这是否可能。

任何帮助表示赞赏。提前致谢！

有没有一种方法可以将2列布局转换为带有媒体查询的1列布局？

2列布局的条件：

1. 项目应在列中一个接一个地流动
2. 列中的项目将具有不同的高度
3. 项目位置（顺序）可以由html标记元素位置强加

1列布局的条件：

1. 项目应该一个接一个地流动
2. 列中的项目将具有不同的高度
3. 不能通过html标记强加项目位置（！）（应通过CSS控制）

我一直在考虑为列使用两个单独的容器-但当布局变为1列时，该构造会阻止我在列之间重新排序（混合）元素。我似乎应该将所有元素放置在一个容器中-然后对于1列布局，可以将flex用于重新排序，但是在那种情况下如何实现2列布局？

要模拟媒体查询行为，请从主容器中删除类“一栏”。

<div id="container" class="one-column"> -> <div id="container" class="">

在此概念中，主要问题在于，列（2列布局）中的项目不会直接一个接一个地流动（右列中的项目之间存在间隙）。

这是我到目前为止所取得的成就：

<div id="container" class="one-column"> -> <div id="container" class="">

* {
  box-sizing: border-box;
}
div {
  width: 100%;
  height: 100px;
  float: left;
}
#container.one-column {
  display: flex;
  flex-direction: column;
  height: auto;
}
#container {
  display: block;
}
.col1 {
  width: 60%;
  background-color: red;
  height:300px;
  float: left;
}
.col2 {
  width: 40%;
  background-color: blue;
  border: 1px solid white;
  float: right;
}
.one-column > …

我有以下代码：

.wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.a {
  background-color: red;
  width: 65%;
}

.b {
  background-color: green;
  width: 35%;
}

.c {
  background-color: blue;
  width: 65%;
  height: 100px;
}

.d {
  background-color: orange;
  width: 35%;
}

.e {
  background-color: teal;
  width: 65%;
}

.f {
  background-color: purple;
  width: 35%;
}

<div class="wrapper container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="d">D</div>
  <div class="e">E</div>
  <div class="f">F</div>
</div>

我试图让 F 正好在 D 之下，就像这样：

我这样做而不是 2 个单独的列的主要原因是因为我希望以后能够使用order. …

示例代码： https: //jsfiddle.net/z7ybks9u/2/

动机：我想强制采用 3 列布局，支持固定宽度但可变高度的 DIVS，具有布局效率，不会暴露项目之间的大“空白孔”。由于元素的数量未知，我无法限制 Flex 容器的高度。

问题：在不强制弹性容器高度的情况下，我看不到多于一列，因为它只是利用了将所有项目容纳在一列中所需的垂直空间。

我被迫做的事情：

gallery-height {

      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      align-content: center;
      max-height: 700px;   <-----  NEED TO DO THAT TO SEE COLUMNS BUT I HAVE TO SUPPORT UNKNOWN NBR OF ELEMENTS
    }