如何设置多个CSS网格的格式以使其外观相同
如何设置多个CSS网格的格式以使其外观相同
提问于 2019-05-26 23:51:16
我有一个php文件，它生成我的html页面，其中包含一个网格容器，其中填充了指定目录中的每个电影的内容。所有这些都嵌套在foreach循环中。
我希望它看起来像照片中排名前两位的电影。
看起来是这样的：
代码: CSS：
.grid-item {
justify-content: center;
display: grid;
grid-gap: 10px;
padding: 10px;
}
.item1 {
grid-column:1 / span 1;
grid-row: 1 / span 1;
}
.item2 {
grid-column: 1 / span 1;
grid-row: 2 / span 2;
}
.item3 {
display: flex;
grid-column: 2 / span 2;
grid-row: 1 / span 3;
align-items: center;
}
.grid-containerTest {
width: 95%;
display: grid;
grid-gap: 20px;
margin: auto auto 5px;
flex-direction: column;
top: 10px;
bottom: 5px;
padding: 10px;
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid black;
}
PHP/HTML：
echo '<div class="grid-containerTest">';
if (file_exists($dir . '/xml/' . $withoutExt . '.xml')){
echo '<div class="grid-item item1"><h3>' . $xml->title . '</h3></div>';
}else{
echo '<div class="grid-item item1"><h3>' . $withoutExt . '</h3></div>';
}
echo '<div class="grid-item item2"><video width="300" height="400" poster="'. $image .'" controls preload="none">';
echo '<source src="'. $movie .'" type="video/mp4"></video></div>';
echo '<div class="grid-item item3">' . $xml->overview . '</div>';
echo '<br /><br /></div>';回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-26 23:57:20
我在发布后几秒钟就发现了这个错误:justify-内容只是需要从中心到左侧更改，或者从以下代码片段中完全删除：
.grid-item {
justify-content: center;
display: grid;
grid-gap: 10px;
padding: 10px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56315068
复制相关文章
相似问题
腾讯云开发者
