响应的方块旋转木马

时间:2016-08-23 13:36:16

标签: css responsive-design flexbox carousel

我正在创建一个显示Instagram Feed的轮播。 Instagram图片是方形的,所以计划是创建一排几个方形图片容器,并将剩余的空间重新分配给左右按钮。

网站布局基于流畅和基于弹性框架。请参阅小提琴https://jsfiddle.net/xc196he7/。如您所见,空间以这种方式分布 - 标题为1/5,旋转木马和页脚为2/5。

我的问题在于方块。转盘高度完全是流动的。有没有办法将每个方形宽度设置为等于该高度?

.photo
{
    flex: 0 0 30%;
}

方法是错误的,它只是显示预期的结果。剩下的空间以这种方式重新分配

.left, .right
{
    flex-grow: 1;
}

是否可以使用纯CSS或唯一的方法是使用JS设置宽度?

0 个答案:

没有答案