相关疑难解决方法(0)

实际上,这是Pinterest布局.但是,在线发现的解决方案包含在列中,这意味着容器无意中水平生长.这不是 Pinterest布局,并且它不适用于动态加载的内容.

我想要做的是有一堆固定宽度和不对称高度的图像,水平放置,但当满足固定宽度容器的限制时包裹在一个新行中:

flexbox可以做到这一点,还是我不得不求助于像Masonry这样的JS解决方案？

我正在开发一个响应式网站,并遇到了一个有趣的问题.我有一些divs并排.它们可能有2到6个左右.当屏幕宽度不足以正确显示所有内容时,div会垂直堆叠.简单到使用CSS.

问题是,我需要它们按照不同的顺序排列.这很容易使用2或3个div(根据宽度更改div顺序),但在添加第四个时更具挑战性.

我可以使用position: absolute;并手动设置位置,但这会导致父级缩小而不能正确包含它们.

为了使这更复杂,我不能使用JavaScript.

使用两列:

(另)

HTML:

<div id="container">
    <div class="column-half column-half-2">
        First div on mobile, right div on desktop
    </div>
    <div class="column-half column-half-1">
        Second div on mobile, left div on desktop
    </div>
</div>

CSS:

.container {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 20px;
    position: relative;
}
.column-half {
    display: table-cell;
    padding: 25px;
    vertical-align: top;
    width: 40%;
}
.column-half-1 {
    float: left;
}
.column-half-2 {
    float: right;
}

HTML,有4列:

<div id="container">
    <div class="column-quarter …

我有一个flex的问题.

我有一个包装器,可以显示最少1个,最多9个方块.根据网格中的平方数,正方形可以有多种尺寸.除了一个,我已经完成了所有必需的工作,如下图所示:

我的风格是:

.grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: space-between;
    width: 300px;
    height: 300px;
    position: relative;
}

加.图像的大小基于它们的总数和它们在列表中的位置.

所以当我从右下方有一个大正方形(占据4个小方块的位置)和5个小方块时,问题出现了.

最重要的是他应该是第一个.

在他旁边(右上角)是第二个,这也是正确的.

第三个位于左下角,它应位于第二行和最右侧.因为这个,所有其他人都处于错误的位置,所以最后一个是溢出的.

我已经尝试了很多值组合justify-content,align-content,align-items和align-self,但没有工作过.

如果没有针对此的灵活解决方案,我将回到大量课程并定位绝对解决方案.但我不喜欢它.这是太多的风格,看起来不太好.

任何建议将不胜感激.

我正在寻找一种方法在Angular 1上以响应的方式显示4张具有可变高度的卡片.

在大屏幕上它应该显示如下:

+-------+ +-------+
|   1   | |   2   |
|       | |       |
+-------+ |       |
|   3   | |       |
|       | +-------+
|       | |   4   |
|       | |       |
+-------+ |       |
          |       |
          +-------+

在小屏幕上应该显示如下:

+-------+
|   1   |
|       |
+-------+
|   2   |
|       |
|       |
|       |
+-------+
|   3   |
|       |
|       |
|       |
+-------+
|   4   |
|       |
|       |
|       |
+-------+

这对于响应性要求是可行的,但如果另一张卡更高,则在同一列上的卡之间显示大的空间 …