代码之家  ›  专栏  ›  技术社区  ›  Eric Hepperle - CodeSlayer2010

显示在WordPress页面中不工作的内联网格

css-grid css3 wordpress css javascript
  •  0
  • Eric Hepperle - CodeSlayer2010  · 技术社区  · 7 年前

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

    以下是有关WordPress的页面: https://erichepperle.com/portfolio/

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

    我已经排除了CSS的问题,如果是特殊性问题,我没有找到它。

    我想这可能和WordPress的添加有关

    每个节元素后的标记。为什么要这么做?我试过5种不同的方法来剥离P标签和 他们都没用

    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:ehepp.devmail+portfolio@gmail.com">Eric Hepperle - Webmaster</a>

</footer></div>
<!-- END #wrapper div -->
    2 回复  |  直到 7 年前
        1
  •  1
  •   Rokas    7 年前 

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

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

        2
  •  0
  •   ErcanEr    7 年前

    实际上,所有的问题都是由图像引起的。我为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>
    推荐文章
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号