保持流体CSS网格布局中元素的纵横比

-1

我有4列CSS网格布局中的div元素列表。 div元素设置为100％宽度，填充顶部为100％，以保持1：1的宽高比。这是一种常见的技术，如下所示：https://stackoverflow.com/a/6615994/7949834 保持流体CSS网格布局中元素的纵横比

这适用于Firefox，但不适用于Chrome。在Chrome中，元素不占用网格容器内的任何空间。这是什么原因？

ul { 
 
    border: 2px solid red; 
 
    display: grid; 
 
    grid-gap: 5%; 
 
    grid-template-columns: auto auto auto auto; 
 
    list-style-type: none; 
 
} 
 

 
div { 
 
    background-color: green; 
 
    padding-top: 100%; 
 
    width: 100%; 
 
}

<ul> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
</ul>

https://jsfiddle.net/ab0asum3/

来源

2017-10-11 blacklight

似乎有2个问题：

auto不是grid-template-columns有效值 - 使用为grid-gap的百分比值使用类似1fr
当没有明确的高度已经为li定义或div

您需要为行间隙使用像素值。

ul { 
 
    border: 2px solid red; 
 
    display: grid; 
 
    grid-gap: 10px 5%; 
 
    grid-template-columns: repeat(4, 1fr); 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
div { 
 
    background-color: green; 
 
    padding-top: 100%; 
 
    width: 100%; 
 
}

<ul> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
</ul>

来源

2017-10-11 23:21:31

我想你已经明白了这一点。谢谢。 – blacklight

我仍然在学习CSS网格，所以我可能是错的。在没有明确定义的高度的情况下在其他元素上使用百分比vakues通常是有问题的。这似乎解决了这个问题。 –

-1

如果打开丁目DevTools并检查divs你会看到浏览器正在计算其高度0像素。我不能确切地说你在这里打破了哪个怪癖或哪个标准，但是如果嵌套的divs没有身高，他们就不会在他们的父母lis上传递任何东西，并且您将不会显示任何内容。

的原因是铬与零高度，这又意味着父li将具有零高度计算嵌套div。那是你的原因。

来源

2017-10-11 22:57:55 worc

Firefox和Chrome都计算零高度的嵌套div。但是有效高度也应该是Firefox填充的填充结果，Chrome不会。我不确定哪个实现在这里是正确的。感谢您的评论，我不知道为什么你是downvoted。 – blacklight

这是一个奇怪的边缘情况下，也许驱动器downvote只是不熟悉它。您可能想要为FF和Chrome挖掘渲染规则，并了解它们为什么在填充/零高度矛盾方面存在差异。 – worc

你应该使用1fr代替auto大小的列：

ul { 
 
    border: 2px solid red; 
 
    display: grid; 
 
    grid-gap: 5%; 
 
    grid-template-columns: 1fr 1fr 1fr 1fr; 
 
    list-style-type: none; 
 
} 
 

 
li:nth-child(4n)~li { 
 
    /* eventually for the gap missing in chrome */ 
 
    margin-top: 5% 
 
} 
 

 
div { 
 
    background-color: green; 
 
    padding-top: 100%; 
 
    width: 100%; 
 
}

<ul> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
</ul>

ñ ote：对于方形技术，与flex不同，它可以由网格子制成，它可以允许您填充div，并以内容为中心示例https://jsfiddle.net/ab0asum3/4/

来源

2017-10-11 23:22:07

保持流体CSS网格布局中元素的纵横比

回答

相关问题