显示内联网格在 WordPress 页面中不起作用

【问题标题】：Display inline-grid not working in WordPress pages显示内联网格在 WordPress 页面中不起作用
【发布时间】：2018-09-05 22:51:24
【问题描述】：

我创建了一个有效的投资组合网页 (HTML/CSS)，它在本地成功显示。但是当我将代码部分转移到我准备好的 WordPress 页面时，它只显示在一个左对齐的列中。

这里是有问题的 WordPress 页面：https://erichepperle.com/portfolio/

网站显示如何损坏的屏幕截图

我一直在对 CSS 进行故障排除，如果是特异性问题，我还没有找到。

我认为可能与添加WordPress有关

标记在每个部分元素之后。为什么这样做？我尝试了大约 5 种关于去除 P 标签的不同建议，没有一个奏效

一个简单的一页本地.htm文件的工作部分截图

是什么阻止了我的页面正确对齐，我该如何解决？

我的代码

.project {
    border: solid black 2px;
    padding: .2em 1em;
    /* float: left; */
    /* display: block; */
    overflow: hidden;
    width: 20vw;
    background: wheat;
    border-radius: .6em;
    min-width: 250px;
    margin: 0 1em .4em;
    display: inline-grid;
}
<div id="wrapper"><header>
<h3>Web Design Portfolio:</h3>
</header>
<div id="content"><section class="project"><img class="aligncenter size-full wp-image-6246" src="https://erichepperle.com/wp-content/uploads/2018/06/sm_erich-hepperle-web-design-portfolio-hepkatorganics-011.png" alt="" width="198" height="133" />
<ul class="horz-info">
 	<li><a title="Eric Hepperle Designs Client: Hepkat Organics" href="https://hepkatorganics.com" target="_blank" rel="noopener">Hepkat Organics</a> |</li>
 	<li>2017 |</li>
 	<li>WordPress (self-hosted)</li>
</ul>
<h5 class="proj-description">Description:</h5>
<ul>
 	<li>Created web presence</li>
 	<li>E-commerce</li>
 	<li>Blog</li>
</ul>
</section><!-- End section -->

<section class="project">
<img class="aligncenter wp-image-6243 size-full" src="https://erichepperle.com/wp-content/uploads/2018/06/sm_erich-hepperle-web-design-portfolio-dsrfarms-011.png" alt="" width="198" height="123" />
<ul class="horz-info">
 	<li><a title="Eric Hepperle Designs Client: DSR Farms" href="http://ehepperle.com/portfolio/dsrfarms/2017-05-01/" target="_blank" rel="noopener">DSR Farms</a> |</li>
 	<li>2017 |</li>
 	<li>WordPress (self-hosted)</li>
</ul>
<h5 class="proj-description">Description:</h5>
<ul>
 	<li>Service</li>
 	<li>Service</li>
 	<li>Service</li>
</ul>
</section><!-- End section -->

<section class="project">
<img class="size-full wp-image-6247 aligncenter" src="https://erichepperle.com/wp-content/uploads/2018/06/sm_erich-hepperle-web-design-portfolio-jjjfarm-011.png" alt="" width="198" height="123" />
<ul class="horz-info">
 	<li><a title="Eric Hepperle Designs Client: Triple J Farms" href="http://ehepperle.com/portfolio/jjjfarms/2017-05-02/" target="_blank" rel="noopener">JJJ Farms</a> |</li>
 	<li>2017 |</li>
 	<li>WordPress (self-hosted)</li>
</ul>
<h5 class="proj-description">Description:</h5>
<ul>
 	<li>Service</li>
 	<li>Service</li>
 	<li>Service</li>
</ul>
</section><!-- End section -->

<section class="project">
<img class="size-full wp-image-6259 aligncenter" src="https://erichepperle.com/wp-content/uploads/2018/06/sm_eric-hepperle-web-design-portfolio-graywolf-011.png" alt="" width="198" height="123" />
<ul class="horz-info">
 	<li><a title="Eric Hepperle CAS215 Course Final Project: The Gray Wolf Sanctuary" href="http://ehepperle.com/other/assignments/pcc-cas215-final/index.html" target="_blank" rel="noopener">CAS215</a> |</li>
 	<li>2016 |</li>
 	<li>Hand-Coded</li>
</ul>
<h5 class="proj-description">Description:</h5>
<ul>
 	<li>Service</li>
 	<li>Service</li>
 	<li>Service</li>
</ul>
</section><!-- End section -->

<section class="project">
<img class="proj-img" src="http://ehepperle.com/other/misc-images/sm_erichepperle-webdesign-portfolio-phttours-1.png" alt="alt goes here" />
<ul class="horz-info">
 	<li><a title="Eric Hepperle CAS206 Course Final Project: Portland Historical Tours" href="http://ehepperle.com/other/assignments/pcc-cas206-final/" target="_blank" rel="noopener">CAS206</a> |</li>
 	<li>2016 |</li>
 	<li>Hand-Coded</li>
</ul>
<h5 class="proj-description">Description:</h5>
<ul>
 	<li>Service</li>
 	<li>Service</li>
 	<li>Service</li>
</ul>
</section><!-- End section -->

<section class="project">
<img class="proj-img" src="http://ehepperle.com/other/misc-images/sm_erichepperle-webdesign-portfolio-ehw-1.png" alt="alt goes here" />
<ul class="horz-info">
 	<li><a title="Eric Hepperle Designs Client: Eric L. Hepperle's Personal Website" href="https://erichepperle.com" target="_blank" rel="noopener">Eric L. Hepperle</a> |</li>
 	<li>2017 |</li>
 	<li>WordPress (self-hosted)</li>
</ul>
<h5 class="proj-description">Description:</h5>
<ul>
 	<li>Service</li>
 	<li>Service</li>
 	<li>Service</li>
</ul>
</section><!-- End section -->

<section class="project">
<img class="proj-img" src="http://ehepperle.com/other/misc-images/sm_erichepperle-webdesign-portfolio-naec-1.png" alt="alt goes here" />
<ul class="horz-info">
 	<li><a title="Eric Hepperle Designs Client: Native American Entertainment Coalition" href="http://ehepperle.com/portfolio/naec/2017-06-16/" target="_blank" rel="noopener">Native American Entertainment Coalition</a> |</li>
 	<li>2017 |</li>
 	<li>WordPress (self-hosted)</li>
</ul>
<h5 class="proj-description">Description:</h5>
<ul>
 	<li>Service</li>
 	<li>Service</li>
 	<li>Service</li>
</ul>
</section><!-- End section -->

<section class="project">
<img class="proj-img" src="http://ehepperle.com/other/misc-images/sm_erichepperle-webdesign-portfolio-goodroots-1.png" alt="alt goes here" />
<ul class="horz-info">
 	<li><a title="Eric Hepperle Designs Client: Good Roots Community Food Bank &amp; Garden" href="http://ehepperle.com/portfolio/goodroots/2017-07-08/" target="_blank" rel="noopener">Good Roots Community Food Bank &amp; Garden</a> |</li>
 	<li>2017 |</li>
 	<li>WordPress (self-hosted)</li>
</ul>
<h5 class="proj-description">Description:</h5>
<ul>
 	<li>Service</li>
 	<li>Service</li>
 	<li>Service</li>
</ul>
</section><!-- End section -->

<section class="project">
<img class="proj-img" src="http://ehepperle.com/other/misc-images/sm_erichepperle-webdesign-portfolio-handfasting2-1.png" alt="alt goes here" />
<ul class="horz-info">
 	<li><a title="Eric Hepperle CAS213 Course Project: Eric &amp; Kat's Handfasting Cermony Website Design" href="http://ehepperle.com/other/assignments/pcc-cas213-week-7/week7.html" target="_blank" rel="noopener">CAS213</a> |</li>
 	<li>2016 |</li>
 	<li>Hand-Coded</li>
</ul>
<h5 class="proj-description">Description:</h5>
<ul>
 	<li>Service</li>
 	<li>Service</li>
 	<li>Service</li>
</ul>
</section><!-- End section -->

<section class="project">
<img class="proj-img" src="http://ehepperle.com/other/misc-images/sm_erichepperle-webdesign-portfolio-pacmanfaq-1.png" alt="alt goes here" />
<ul class="horz-info">
 	<li><a title="Eric Hepperle CAS213 Course Project: Pac-Man FAQ Webpage Design" href="http://ehepperle.com/other/assignments/pcc-cas213-week-4/week4.html" target="_blank" rel="noopener">CAS213</a> |</li>
 	<li>2016 |</li>
 	<li>Hand-Coded</li>
</ul>
<h5 class="proj-description">Description:</h5>
<ul>
 	<li>Service</li>
 	<li>Service</li>
 	<li>Service</li>
</ul>
</section><!-- End section -->

<section class="project">
<img class="proj-img" src="http://ehepperle.com/other/misc-images/sm_erichepperle-webdesign-portfolio-archangels-1.png" alt="alt goes here" />
<ul class="horz-info">
 	<li><a title="Eric Hepperle CAS213 Course Project: Archangels Website Design" href="http://ehepperle.com/other/assignments/pcc-cas213-week-3/week3.htm" target="_blank" rel="noopener">CAS213</a> |</li>
 	<li>2016 |</li>
 	<li>Hand-Coded</li>
</ul>
<h5 class="proj-description">Description:</h5>
<ul>
 	<li>Service</li>
 	<li>Service</li>
 	<li>Service</li>
</ul>
</section><!-- End section -->

<section class="project">
<img class="proj-img" src="http://ehepperle.com/other/misc-images/sm_erichepperle-webdesign-portfolio-reflections-1.png" alt="alt goes here" />
<ul class="horz-info">
 	<li><a title="Eric Hepperle CAS 206 Course Project: Reflections on HTML5 &amp; CSS3 Webpage Design" href="http://ehepperle.com/other/assignments/pcc-cas206-reflection/reflection.html" target="_blank" rel="noopener">CAS206</a> |</li>
 	<li>2016 |</li>
 	<li>Hand-Coded</li>
</ul>
<h5 class="proj-description">Description:</h5>
<ul>
 	<li>Service</li>
 	<li>Service</li>
 	<li>Service</li>
</ul>
</section><!-- End section -->

</div>
<!-- END #content div -->

<footer>
<div class="copyright">Copyright © 2018 Eric Hepperle</div>
<a href="mailto:ehepp.devmail+portfolio@gmail.com">Eric Hepperle - Webmaster</a>

</footer></div>
<!-- END #wrapper div -->

【问题讨论】：

  • #content 应该是网格容器，.project 是要散布到网格中的孩子（他们自己也可以是网格，但显然不是这里的情况）。 #content 也可以是带有包装集的弹性容器。你能澄清一下吗？
  • @G-Cyr 是的，#content 是一个容器 div，.project 部分是子项。子项应按行显示并响应式自动换行。它适用于我的电脑，但不适用于我的 WordPress 网站。这是有问题的页面：erichepperle.com/portfolio

标签： javascript wordpress css css-grid


【解决方案1】：

使用 flexbox 来定位你的盒子。

将内容包装在某个容器中（在您的情况下是#container）并给出：

#content {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}

现在为我工作。你可以找到更多关于flexbox的信息here

【讨论】：

  • 在我删除“align-items: center”后，flexbox 解决方案起作用了。谢谢
【解决方案2】：

其实所有的问题都是图片造成的。我为 img 写了 css，它被修复了。您可以使图片的尺寸保持不变。像我一样。

<html>
    <style>
        .project {
    border: solid black 2px;
    padding: .2em 1em;
    /* float: left; */
    /* display: block; */
    overflow: hidden;
    width: 20vw;
    background: wheat;
    border-radius: .6em;
    min-width: 250px;
    margin: 0 1em .4em;
    display: inline-grid;
}
img{
    height: 100px;
    width: 200px;
}
        </style>
<div id="wrapper"><header>
<h3>Web Design Portfolio:</h3>
</header>
<div id="content"><section class="project"><img class="aligncenter size-full wp-image-6246" src="https://erichepperle.com/wp-content/uploads/2018/06/sm_erich-hepperle-web-design-portfolio-hepkatorganics-011.png" alt="" width="198" height="133" />
<ul class="horz-info">
 	<li><a title="Eric Hepperle Designs Client: Hepkat Organics" href="https://hepkatorganics.com" target="_blank" rel="noopener">Hepkat Organics</a> |</li>
 	<li>2017 |</li>
 	<li>WordPress (self-hosted)</li>
</ul>
<h5 class="proj-description">Description:</h5>
<ul>
 	<li>Created web presence</li>
 	<li>E-commerce</li>
 	<li>Blog</li>
</ul>
</section><!-- End section -->

<section class="project">
<img class="aligncenter wp-image-6243 size-full" src="https://erichepperle.com/wp-content/uploads/2018/06/sm_erich-hepperle-web-design-portfolio-dsrfarms-011.png" alt="" width="198" height="123" />
<ul class="horz-info">
 	<li><a title="Eric Hepperle Designs Client: DSR Farms" href="http://ehepperle.com/portfolio/dsrfarms/2017-05-01/" target="_blank" rel="noopener">DSR Farms</a> |</li>
 	<li>2017 |</li>
 	<li>WordPress (self-hosted)</li>
</ul>
<h5 class="proj-description">Description:</h5>
<ul>
 	<li>Service</li>
 	<li>Service</li>
 	<li>Service</li>
</ul>
</section><!-- End section -->

<section class="project">
<img class="size-full wp-image-6247 aligncenter" src="https://erichepperle.com/wp-content/uploads/2018/06/sm_erich-hepperle-web-design-portfolio-jjjfarm-011.png" alt="" width="198" height="123" />
<ul class="horz-info">
 	<li><a title="Eric Hepperle Designs Client: Triple J Farms" href="http://ehepperle.com/portfolio/jjjfarms/2017-05-02/" target="_blank" rel="noopener">JJJ Farms</a> |</li>
 	<li>2017 |</li>
 	<li>WordPress (self-hosted)</li>
</ul>
<h5 class="proj-description">Description:</h5>
<ul>
 	<li>Service</li>
 	<li>Service</li>
 	<li>Service</li>
</ul>
</section><!-- End section -->

<section class="project">
<img class="size-full wp-image-6259 aligncenter" src="https://erichepperle.com/wp-content/uploads/2018/06/sm_eric-hepperle-web-design-portfolio-graywolf-011.png" alt="" width="198" height="123" />
<ul class="horz-info">
 	<li><a title="Eric Hepperle CAS215 Course Final Project: The Gray Wolf Sanctuary" href="http://ehepperle.com/other/assignments/pcc-cas215-final/index.html" target="_blank" rel="noopener">CAS215</a> |</li>
 	<li>2016 |</li>
 	<li>Hand-Coded</li>
</ul>
<h5 class="proj-description">Description:</h5>
<ul>
 	<li>Service</li>
 	<li>Service</li>
 	<li>Service</li>
</ul>
</section><!-- End section -->

<section class="project">
<img class="proj-img" src="http://ehepperle.com/other/misc-images/sm_erichepperle-webdesign-portfolio-phttours-1.png" alt="alt goes here" />
<ul class="horz-info">
 	<li><a title="Eric Hepperle CAS206 Course Final Project: Portland Historical Tours" href="http://ehepperle.com/other/assignments/pcc-cas206-final/" target="_blank" rel="noopener">CAS206</a> |</li>
 	<li>2016 |</li>
 	<li>Hand-Coded</li>
</ul>
<h5 class="proj-description">Description:</h5>
<ul>
 	<li>Service</li>
 	<li>Service</li>
 	<li>Service</li>
</ul>
</section><!-- End section -->

<section class="project">
<img class="proj-img" src="http://ehepperle.com/other/misc-images/sm_erichepperle-webdesign-portfolio-ehw-1.png" alt="alt goes here" />
<ul class="horz-info">
 	<li><a title="Eric Hepperle Designs Client: Eric L. Hepperle's Personal Website" href="https://erichepperle.com" target="_blank" rel="noopener">Eric L. Hepperle</a> |</li>
 	<li>2017 |</li>
 	<li>WordPress (self-hosted)</li>
</ul>
<h5 class="proj-description">Description:</h5>
<ul>
 	<li>Service</li>
 	<li>Service</li>
 	<li>Service</li>
</ul>
</section><!-- End section -->

<section class="project">
<img class="proj-img" src="http://ehepperle.com/other/misc-images/sm_erichepperle-webdesign-portfolio-naec-1.png" alt="alt goes here" />
<ul class="horz-info">
 	<li><a title="Eric Hepperle Designs Client: Native American Entertainment Coalition" href="http://ehepperle.com/portfolio/naec/2017-06-16/" target="_blank" rel="noopener">Native American Entertainment Coalition</a> |</li>
 	<li>2017 |</li>
 	<li>WordPress (self-hosted)</li>
</ul>
<h5 class="proj-description">Description:</h5>
<ul>
 	<li>Service</li>
 	<li>Service</li>
 	<li>Service</li>
</ul>
</section><!-- End section -->

<section class="project">
<img class="proj-img" src="http://ehepperle.com/other/misc-images/sm_erichepperle-webdesign-portfolio-goodroots-1.png" alt="alt goes here" />
<ul class="horz-info">
 	<li><a title="Eric Hepperle Designs Client: Good Roots Community Food Bank &amp; Garden" href="http://ehepperle.com/portfolio/goodroots/2017-07-08/" target="_blank" rel="noopener">Good Roots Community Food Bank &amp; Garden</a> |</li>
 	<li>2017 |</li>
 	<li>WordPress (self-hosted)</li>
</ul>
<h5 class="proj-description">Description:</h5>
<ul>
 	<li>Service</li>
 	<li>Service</li>
 	<li>Service</li>
</ul>
</section><!-- End section -->

<section class="project">
<img class="proj-img" src="http://ehepperle.com/other/misc-images/sm_erichepperle-webdesign-portfolio-handfasting2-1.png" alt="alt goes here" />
<ul class="horz-info">
 	<li><a title="Eric Hepperle CAS213 Course Project: Eric &amp; Kat's Handfasting Cermony Website Design" href="http://ehepperle.com/other/assignments/pcc-cas213-week-7/week7.html" target="_blank" rel="noopener">CAS213</a> |</li>
 	<li>2016 |</li>
 	<li>Hand-Coded</li>
</ul>
<h5 class="proj-description">Description:</h5>
<ul>
 	<li>Service</li>
 	<li>Service</li>
 	<li>Service</li>
</ul>
</section><!-- End section -->

<section class="project">
<img class="proj-img" src="http://ehepperle.com/other/misc-images/sm_erichepperle-webdesign-portfolio-pacmanfaq-1.png" alt="alt goes here" />
<ul class="horz-info">
 	<li><a title="Eric Hepperle CAS213 Course Project: Pac-Man FAQ Webpage Design" href="http://ehepperle.com/other/assignments/pcc-cas213-week-4/week4.html" target="_blank" rel="noopener">CAS213</a> |</li>
 	<li>2016 |</li>
 	<li>Hand-Coded</li>
</ul>
<h5 class="proj-description">Description:</h5>
<ul>
 	<li>Service</li>
 	<li>Service</li>
 	<li>Service</li>
</ul>
</section><!-- End section -->

<section class="project">
<img class="proj-img" src="http://ehepperle.com/other/misc-images/sm_erichepperle-webdesign-portfolio-archangels-1.png" alt="alt goes here" />
<ul class="horz-info">
 	<li><a title="Eric Hepperle CAS213 Course Project: Archangels Website Design" href="http://ehepperle.com/other/assignments/pcc-cas213-week-3/week3.htm" target="_blank" rel="noopener">CAS213</a> |</li>
 	<li>2016 |</li>
 	<li>Hand-Coded</li>
</ul>
<h5 class="proj-description">Description:</h5>
<ul>
 	<li>Service</li>
 	<li>Service</li>
 	<li>Service</li>
</ul>
</section><!-- End section -->

<section class="project">
<img class="proj-img" src="http://ehepperle.com/other/misc-images/sm_erichepperle-webdesign-portfolio-reflections-1.png" alt="alt goes here" />
<ul class="horz-info">
 	<li><a title="Eric Hepperle CAS 206 Course Project: Reflections on HTML5 &amp; CSS3 Webpage Design" href="http://ehepperle.com/other/assignments/pcc-cas206-reflection/reflection.html" target="_blank" rel="noopener">CAS206</a> |</li>
 	<li>2016 |</li>
 	<li>Hand-Coded</li>
</ul>
<h5 class="proj-description">Description:</h5>
<ul>
 	<li>Service</li>
 	<li>Service</li>
 	<li>Service</li>
</ul>
</section><!-- End section -->
</html>

【讨论】：

  • 感谢您的回答。我认为你误解了这个问题。 #content 是容器 div，而 .project 部分是子项。子项应按行显示并响应式自动换行。它适用于我的电脑，但不适用于我的 WordPress 网站。这是有问题的页面：erichepperle.com/portfolio
猜你喜欢
  • 2014-12-12
  • 1970-01-01
  • 1970-01-01
  • 2017-02-11
  • 2013-09-23
  • 2017-11-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode