我创建了一个工作组合网页(HTML / CSS),并在本地成功显示。但是当我将代码部分传输到我准备的WordPress页面时,它只显示在一个左对齐的列中。
这是有问题的WordPress页面:https://erichepperle.com/portfolio/
我一直在对CSS进行故障排除,如果是特殊问题,我还没找到它。
我认为这可能与WordPress添加有关
每个section元素后面的标签。它为什么这样做?我已经尝试了关于剥离P标签的方法的5个不同的建议,但没有一个工作
什么阻止我的页面正确对齐,我该如何解决?
.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 & Garden" href="http://ehepperle.com/portfolio/goodroots/2017-07-08/" target="_blank" rel="noopener">Good Roots Community Food Bank & 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 & 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 & 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 -->
使用flexbox定位您的盒子。
在一些容器中包装内容(在你的情况下是#container)并给出:
#content {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
现在适合我。您可以找到有关flexbox here的更多信息
实际上,所有问题都是由图像引起的。我为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 & Garden" href="http://ehepperle.com/portfolio/goodroots/2017-07-08/" target="_blank" rel="noopener">Good Roots Community Food Bank & 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 & 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 & 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>