首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何设置多个CSS网格的格式以使其外观相同

如何设置多个CSS网格的格式以使其外观相同
EN

Stack Overflow用户
提问于 2019-05-26 23:51:16
回答 1查看 31关注 0票数 1

我有一个php文件,它生成我的html页面,其中包含一个网格容器,其中填充了指定目录中的每个电影的内容。所有这些都嵌套在foreach循环中。

我希望它看起来像照片中排名前两位的电影。

看起来是这样的:

代码: CSS:

代码语言:javascript
复制
.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:

代码语言:javascript
复制
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>';
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-05-26 23:57:20

我在发布后几秒钟就发现了这个错误:justify-内容只是需要从中心到左侧更改,或者从以下代码片段中完全删除:

代码语言:javascript
复制
.grid-item {
  justify-content: center;
  display: grid;
  grid-gap: 10px;
  padding: 10px;
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56315068

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档