我正在尝试在本地wordpress环境中实现此自适应六边形网格（https://github.com/web-tiki/responsive-grid-of-hexagons）。这是它的样子： image link
我删除了除“ style.css”之外的所有其他样式表的“链接”标签；将所有所需的代码都放在了代码笔（https://codepen.io/shehar-yar-khan/pen/zLQmGV）上，但仍然显示相同的内容。我认为没有其他CSS会干扰网格。这是代码： HTML代码：
<ul id="hexGrid">
<li class="hex">
<article class="hexIn" id="post-1241">
<div class="hexLink">
<header class="entry-header">
<h2 class="entry-title"><a href="http://127.0.0.1/wordpress/2012/01/07/template-sticky/" rel="bookmark">Template: Sticky</a></h2> </header><!-- .entry-header -->
<div class="entry-content">
<p>This is a sticky post. There are a few things to verify: The sticky post […]</p>
</div><!-- .entry-content -->
</div>
</article><!-- #post-1241 -->
</li><!--- hex -->
<li class="hex">
<article class="hexIn" id="post-1178">
<div class="hexLink">
<a class="post-thumbnail" href="http://127.0.0.1/wordpress/2013/01/11/markup-html-tags-and-formatting/" aria-hidden="true" tabindex="-1">
<img width="1600" height="1066" src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Markup: HTML Tags and Formatting" srcset="http://127.0.0.1/wordpress/wp-content/uploads/2011/07/dcp_2082.jpg 1600w, http://127.0.0.1/wordpress/wp-content/uploads/2011/07/dcp_2082-300x200.jpg 300w, http://127.0.0.1/wordpress/wp-content/uploads/2011/07/dcp_2082-768x512.jpg 768w, http://127.0.0.1/wordpress/wp-content/uploads/2011/07/dcp_2082-1024x682.jpg 1024w" sizes="(max-width: 1600px) 100vw, 1600px"> </a>
<header class="entry-header">
<h2 class="entry-title"><a href="http://127.0.0.1/wordpress/2013/01/11/markup-html-tags-and-formatting/" rel="bookmark">Markup: HTML Tags and Formatting</a></h2> </header><!-- .entry-header -->
<div class="entry-content">
<p>Headings Header one Header two Header three Header four Header five Header six Blockquotes Single […]</p>
</div><!-- .entry-content -->
</div>
</article><!-- #post-1178 -->
</li><!--- hex -->
<li class="hex">
<article class="hexIn" id="post-1177">
<div class="hexLink">
<a class="post-thumbnail" href="http://127.0.0.1/wordpress/2013/01/10/markup-image-alignment/" aria-hidden="true" tabindex="-1">
<img width="1920" height="1200" src="http://127.0.0.1/wordpress/wp-content/uploads/2013/03/soworthloving-wallpaper.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Markup: Image Alignment" srcset="http://127.0.0.1/wordpress/wp-content/uploads/2013/03/soworthloving-wallpaper.jpg 1920w, http://127.0.0.1/wordpress/wp-content/uploads/2013/03/soworthloving-wallpaper-300x188.jpg 300w, http://127.0.0.1/wordpress/wp-content/uploads/2013/03/soworthloving-wallpaper-768x480.jpg 768w, http://127.0.0.1/wordpress/wp-content/uploads/2013/03/soworthloving-wallpaper-1024x640.jpg 1024w" sizes="(max-width: 1920px) 100vw, 1920px"> </a>
<header class="entry-header">
<h2 class="entry-title"><a href="http://127.0.0.1/wordpress/2013/01/10/markup-image-alignment/" rel="bookmark">Markup: Image Alignment</a></h2> </header><!-- .entry-header -->
<div class="entry-content">
<p>Welcome to image alignment! The best way to demonstrate the ebb and flow of the […]</p>
</div><!-- .entry-content -->
</div>
</article><!-- #post-1177 -->
</li><!--- hex -->
<li class="hex">
<article class="hexIn" id="post-1176">
<div class="hexLink">
<a class="post-thumbnail" href="http://127.0.0.1/wordpress/2013/01/09/markup-text-alignment/" aria-hidden="true" tabindex="-1">
<img width="165" height="210" src="http://127.0.0.1/wordpress/wp-content/uploads/2014/01/spectacles.gif" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Markup: Text Alignment"> </a>
<header class="entry-header">
<h2 class="entry-title"><a href="http://127.0.0.1/wordpress/2013/01/09/markup-text-alignment/" rel="bookmark">Markup: Text Alignment</a></h2> </header><!-- .entry-header -->
<div class="entry-content">
<p>Default This is a paragraph. It should not have any alignment of any kind. It […]</p>
</div><!-- .entry-content -->
</div>
</article><!-- #post-1176 -->
</li><!--- hex -->
<li class="hex">
<article class="hexIn" id="post-1174">
<div class="hexLink">
<header class="entry-header">
<h2 class="entry-title"><a href="http://127.0.0.1/wordpress/2013/01/05/title-with-special-characters/" rel="bookmark">Markup: Title With Special Characters ~`!@#$%^&*()-_=+{}[]/\;:'”?,.></a></h2> </header><!-- .entry-header -->
<div class="entry-content">
<p>Putting special characters in the title should have no adverse effect on the layout or […]</p>
</div><!-- .entry-content -->
</div>
</article><!-- #post-1174 -->
</li><!--- hex -->
<li class="hex">
<article class="hexIn" id="post-1802">
<div class="hexLink">
<a class="post-thumbnail" href="http://127.0.0.1/wordpress/2013/01/05/title-with-special-characters-3/" aria-hidden="true" tabindex="-1">
<img width="1131" height="707" src="http://127.0.0.1/wordpress/wp-content/uploads/2013/04/triforce-wallpaper.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Markup: Title With Special Characters ~`!@#$%^&*()-_=+{}[]/\;:'”?,.>" srcset="http://127.0.0.1/wordpress/wp-content/uploads/2013/04/triforce-wallpaper.jpg 1131w, http://127.0.0.1/wordpress/wp-content/uploads/2013/04/triforce-wallpaper-300x188.jpg 300w, http://127.0.0.1/wordpress/wp-content/uploads/2013/04/triforce-wallpaper-768x480.jpg 768w, http://127.0.0.1/wordpress/wp-content/uploads/2013/04/triforce-wallpaper-1024x640.jpg 1024w" sizes="(max-width: 1131px) 100vw, 1131px"> </a>
<header class="entry-header">
<h2 class="entry-title"><a href="http://127.0.0.1/wordpress/2013/01/05/title-with-special-characters-3/" rel="bookmark">Markup: Title With Special Characters ~`!@#$%^&*()-_=+{}[]/\;:'”?,.></a></h2> </header><!-- .entry-header -->
<div class="entry-content">
<p>Putting special characters in the title should have no adverse effect on the layout or […]</p>
</div><!-- .entry-content -->
</div>
</article><!-- #post-1802 -->
</li><!--- hex -->
<li class="hex">
<article class="hexIn" id="post-1741">
<div class="hexLink">
<a class="post-thumbnail" href="http://127.0.0.1/wordpress/2013/01/05/title-with-special-characters-2/" aria-hidden="true" tabindex="-1">
<img width="300" height="580" src="http://127.0.0.1/wordpress/wp-content/uploads/2013/03/featured-image-vertical.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Markup: Title With Special Characters ~`!@#$%^&*()-_=+{}[]/\;:'”?,.>" srcset="http://127.0.0.1/wordpress/wp-content/uploads/2013/03/featured-image-vertical.jpg 300w, http://127.0.0.1/wordpress/wp-content/uploads/2013/03/featured-image-vertical-155x300.jpg 155w" sizes="(max-width: 300px) 100vw, 300px"> </a>
<header class="entry-header">
<h2 class="entry-title"><a href="http://127.0.0.1/wordpress/2013/01/05/title-with-special-characters-2/" rel="bookmark">Markup: Title With Special Characters ~`!@#$%^&*()-_=+{}[]/\;:'”?,.></a></h2> </header><!-- .entry-header -->
<div class="entry-content">
<p>Putting special characters in the title should have no adverse effect on the layout or […]</p>
</div><!-- .entry-content -->
</div>
</article><!-- #post-1741 -->
</li><!--- hex -->
<li class="hex">
<article class="hexIn" id="post-1173">
<div class="hexLink">
<a class="post-thumbnail" href="http://127.0.0.1/wordpress/2013/01/05/markup-title-with-markup/" aria-hidden="true" tabindex="-1">
<img width="580" height="300" src="http://127.0.0.1/wordpress/wp-content/uploads/2013/03/featured-image-horizontal.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Markup: Title With Markup" srcset="http://127.0.0.1/wordpress/wp-content/uploads/2013/03/featured-image-horizontal.jpg 580w, http://127.0.0.1/wordpress/wp-content/uploads/2013/03/featured-image-horizontal-300x155.jpg 300w" sizes="(max-width: 580px) 100vw, 580px"> </a>
<header class="entry-header">
<h2 class="entry-title"><a href="http://127.0.0.1/wordpress/2013/01/05/markup-title-with-markup/" rel="bookmark">Markup: Title <em>With</em> <b>Markup</b></a></h2> </header><!-- .entry-header -->
<div class="entry-content">
<p>Verify that: The post title renders the word “with” in italics and the word “markup” […]</p>
</div><!-- .entry-content -->
</div>
</article><!-- #post-1173 -->
</li><!--- hex -->
<li class="hex">
<article class="hexIn" id="post-1016">
<div class="hexLink">
<a class="post-thumbnail" href="http://127.0.0.1/wordpress/2012/03/15/template-featured-image-vertical/" aria-hidden="true" tabindex="-1">
<img width="300" height="580" src="http://127.0.0.1/wordpress/wp-content/uploads/2013/03/featured-image-vertical.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Template: Featured Image (Vertical)" srcset="http://127.0.0.1/wordpress/wp-content/uploads/2013/03/featured-image-vertical.jpg 300w, http://127.0.0.1/wordpress/wp-content/uploads/2013/03/featured-image-vertical-155x300.jpg 155w" sizes="(max-width: 300px) 100vw, 300px"> </a>
<header class="entry-header">
<h2 class="entry-title"><a href="http://127.0.0.1/wordpress/2012/03/15/template-featured-image-vertical/" rel="bookmark">Template: Featured Image (Vertical)</a></h2> </header><!-- .entry-header -->
<div class="entry-content">
<p>This post should display a featured image, if the theme supports it. Non-square images can […]</p>
</div><!-- .entry-content -->
</div>
</article><!-- #post-1016 -->
</li><!--- hex -->
<li class="hex">
<article class="hexIn" id="post-1011">
<div class="hexLink">
<a class="post-thumbnail" href="http://127.0.0.1/wordpress/2012/03/15/template-featured-image-horizontal/" aria-hidden="true" tabindex="-1">
<img width="580" height="300" src="http://127.0.0.1/wordpress/wp-content/uploads/2013/03/featured-image-horizontal.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Template: Featured Image (Horizontal)" srcset="http://127.0.0.1/wordpress/wp-content/uploads/2013/03/featured-image-horizontal.jpg 580w, http://127.0.0.1/wordpress/wp-content/uploads/2013/03/featured-image-horizontal-300x155.jpg 300w" sizes="(max-width: 580px) 100vw, 580px"> </a>
<header class="entry-header">
<h2 class="entry-title"><a href="http://127.0.0.1/wordpress/2012/03/15/template-featured-image-horizontal/" rel="bookmark">Template: Featured Image (Horizontal)</a></h2> </header><!-- .entry-header -->
<div class="entry-content">
<p>This post should display a featured image, if the theme supports it. Non-square images can […]</p>
</div><!-- .entry-content -->
</div>
</article><!-- #post-1011 -->
</li><!--- hex -->
<li class="hex">
<article class="hexIn" id="post-996">
<div class="hexLink">
<header class="entry-header">
<h2 class="entry-title"><a href="http://127.0.0.1/wordpress/2012/03/15/template-more-tag/" rel="bookmark">Template: More Tag</a></h2> </header><!-- .entry-header -->
<div class="entry-content">
<p>This content is before the more tag. Right after this sentence should be a “continue […]</p>
</div><!-- .entry-content -->
</div>
</article><!-- #post-996 -->
</li><!--- hex --> </ul>
CSS代码：
* {
margin: 0;
padding: 0;
}
#hexGrid {
display: flex;
flex-wrap: wrap;
width: 90%;
margin: 0 auto;
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-size: 15px;
list-style-type: none;
}
.hex {
position: relative;
visibility:hidden;
outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
.hex::after{
content:'';
display:block;
padding-bottom: 86.602%; /* = 100 / tan(60) * 1.5 */
}
.hexIn{
position: absolute;
width:96%;
padding-bottom: 110.851%; /* = width / sin(60) */
margin:0 2%;
overflow: hidden;
visibility: hidden;
outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
-webkit-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
-ms-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
transform: rotate3d(0,0,1,-60deg) skewY(30deg);
}
.hexIn * {
position: absolute;
visibility: visible;
outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
.hexLink {
display:block;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
overflow: hidden;
-webkit-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
-ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
transform: skewY(-30deg) rotate3d(0,0,1,60deg);
}
/*** HEX CONTENT **********************************************************************/
.hex img {
left: -100%;
right: -100%;
width: auto;
height: 100%;
margin: 0 auto;
-webkit-transform: rotate3d(0,0,0,0deg);
-ms-transform: rotate3d(0,0,0,0deg);
transform: rotate3d(0,0,0,0deg);
}
.hex h2, .hex p {
width: 100%;
padding: 5%;
box-sizing:border-box;
background-color: rgba(0, 128, 128, 0.8);
font-weight: 300;
-webkit-transition: -webkit-transform .2s ease-out, opacity .3s ease-out;
transition: transform .2s ease-out, opacity .3s ease-out;
}
.hex h2 {
bottom: 50%;
padding-top:50%;
font-size: 1.5em;
z-index: 1;
-webkit-transform:translate3d(0,-100%,0);
-ms-transform:translate3d(0,-100%,0);
transform:translate3d(0,-100%,0);
}
.hex h2::after {
content: '';
position: absolute;
bottom: 0;
left: 45%;
width: 10%;
text-align: center;
border-bottom: 1px solid #fff;
}
.hex p {
top: 50%;
padding-bottom:50%;
-webkit-transform:translate3d(0,100%,0);
-ms-transform:translate3d(0,100%,0);
transform:translate3d(0,100%,0);
}
/*** HOVER EFFECT **********************************************************************/
.hexLink:hover h2, .hexLink:focus h2,
.hexLink:hover p, .hexLink:focus p{
-webkit-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}
/*** HEXAGON SIZING AND EVEN ROW INDENTATION *****************************************************************/
@media (min-width:1201px) { /* <- 5-4 hexagons per row */
#hexGrid{
padding-bottom: 4.4%
}
.hex {
width: 20%; /* = 100 / 5 */
}
.hex:nth-child(9n+6){ /* first hexagon of even rows */
margin-left:10%; /* = width of .hex / 2 to indent even rows */
}
}
@media (max-width: 1200px) and (min-width:901px) { /* <- 4-3 hexagons per row */
#hexGrid{
padding-bottom: 5.5%
}
.hex {
width: 25%; /* = 100 / 4 */
}
.hex:nth-child(7n+5){ /* first hexagon of even rows */
margin-left:12.5%; /* = width of .hex / 2 to indent even rows */
}
}
@media (max-width: 900px) and (min-width:601px) { /* <- 3-2 hexagons per row */
#hexGrid{
padding-bottom: 7.4%
}
.hex {
width: 33.333%; /* = 100 / 3 */
}
.hex:nth-child(5n+4){ /* first hexagon of even rows */
margin-left:16.666%; /* = width of .hex / 2 to indent even rows */
}
}
@media (max-width: 600px) { /* <- 2-1 hexagons per row */
#hexGrid{
padding-bottom: 11.2%
}
.hex {
width: 50%; /* = 100 / 3 */
}
.hex:nth-child(3n+3){ /* first hexagon of even rows */
margin-left:25%; /* = width of .hex / 2 to indent even rows */
}
}
@media (max-width: 400px) {
#hexGrid {
font-size: 13px;
}
}
我尝试修改代码，并注意到当我从h2标签周围删除标头class =“ entry-header” .... / header标签以及从p标签周围移除页脚标签时，使用中的标记，几乎所有内容都可以正常使用。但是我想保持wordpress结构正常。