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

Question

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

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

该网站显示方式的屏幕截图

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

我认为这可能与WordPress添加有关

每个section元素之后的标签。 为什么这样做呢？ 我尝试了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 --> 

Answer 1

使用flexbox放置盒子。

将内容包装在某个容器中（在您的情况下为#container），然后输入以下内容：

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

现在为我工作。 您可以在此处找到有关flexbox的更多信息

Answer 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>