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

问题描述 投票:0回答:2

我创建了一个工作组合网页(HTML / CSS),并在本地成功显示。但是当我将代码部分传输到我准备的WordPress页面时,它只显示在一个左对齐的列中。

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

A screenshot of how the site display is broken

A screenshot of how the site display is broken, showing one left aligned column

我一直在对CSS进行故障排除,如果是特殊问题,我还没找到它。

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

每个section元素后面的标签。它为什么这样做?我已经尝试了关于剥离P标签的方法的5个不同的建议,但没有一个工作

A screenshot of working section a simple one-page local .htm file

A screenshot of working section grid-array-gallery display in a simple one-page local htm file

什么阻止我的页面正确对齐,我该如何解决?

我的守则

.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:[email protected]">Eric Hepperle - Webmaster</a>

</footer></div>
<!-- END #wrapper div -->
javascript css wordpress css3 css-grid
2个回答
1
投票

使用flexbox定位您的盒子。

在一些容器中包装内容(在你的情况下是#container)并给出:

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

现在适合我。您可以找到有关flexbox here的更多信息


0
投票

实际上,所有问题都是由图像引起的。我为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>
© www.soinside.com 2019 - 2024. All rights reserved.