相关疑难解决方法(0)
柔性物品是否可以与其上方的物品紧密对齐？
实际上,这是Pinterest布局.但是,在线发现的解决方案包含在列中,这意味着容器无意中水平生长.这不是 Pinterest布局,并且它不适用于动态加载的内容.
我想要做的是有一堆固定宽度和不对称高度的图像,水平放置,但当满足固定宽度容器的限制时包裹在一个新行中:
flexbox可以做到这一点,还是我不得不求助于像Masonry这样的JS解决方案？
56
推荐指数
推荐指数
2
解决办法
解决办法
1万
查看次数
查看次数
使div在网格中跨越两行
我有一个装满了块的页面display: inline-block.我想做四到两倍大,所以我用float: left或者right把其他块放在一边.
我的问题是,如果我有一个五行元素,我怎么能在它的中间放一个更大的元素？(float自然而然地放在一边).
这是一个示例代码段:
#wrapper{
width: 516px;
}
.block{
display: inline-block;
width: 90px;
height: 50px;
margin: 5px;
background-color: red;
}
.bigger{
height: 110px;
}<div id="wrapper">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block bigger"></div>
<div class="block"></div>
<div class="block"></div>
</div>以下是我希望从上面的代码段中获得的内容 
11
推荐指数
推荐指数
2
解决办法
解决办法
6091
查看次数
查看次数
如何防止网格行跨度改变列位置？
我有一个3 X 3 CSS网格.
我有一排我有三个项目A,B&C.
我希望项目C有rowspan2个.
为此,我正在使用grid-row: 1 / span 2;.这是两行,但它被放置在第一列而不是简单地位于第三列.我不知道为什么会这样.
我希望项目C保留在HTML中的位置.
解决这个问题的一个方法是明确设置grid-column: 3 / span 1我不想做的事情.我希望项目的放置方式与HTML格式相同.
有没有办法抑制这种行为？
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
h1 {
border: 2px solid;
padding: 0;
margin: 0;
font-size: 20px;
}
.a {
grid-row: 1 / span 2;
background: orange;
}<div class="grid-container">
<div>
<h1>A</h1>
</div>
<div>
<h1>B</h1>
</div>
<div class="a">
<h1>C</h1>
</div>
</div>3
推荐指数
推荐指数
1
解决办法
解决办法
473
查看次数
查看次数