有问题的css边距和div图像约束，会喜欢一些建议或提示。

Question

我试图创建一个动态库，我一直遇到一个问题，在jsfiddle中，代码看起来是正确的，但是一旦我将它添加到wordpress中，我就会遇到许多问题。主要的是，图像标题和元数据之间的空白扩展到了一个可笑的程度，尽管我很确定我使用的是一个可行的div约束，但我不能这样做，因为最后一个图像破坏了它的容器并扰乱了线路。

我认为我的问题可能部分是因为我没有一个独特的id来将画廊代码与我正在使用的WordPress主题的内置样式分开，但我不完全确定从哪里开始。至于其他的问题，我真的不知道，我搜索了“如何约束/格式化/拉伸/将图像限制到div容器”以及相同问题的各种其他版本，但我仍然不知道代码中的问题在哪里。

这里有一个指向我的jsfiddle代码的链接：https://jsfiddle.net/nh2geqah/1/

​

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
article,
aside,
details,
embed,
figcaption,
figure,
footer,
header,
main,
nav,
ruby,
section,
summary {
  display: block;
}
#front-page-blog {
  clear: both;
  position: relative;
  padding: 1.5em 0;
}
#front-page-blog .featured-image {
  position: relative;
  margin-bottom: 0.5em;
}
#front-page-blog,
#front-page-blog .featured-image {
  background-color: white;
}
#front-page-blog::after {
  clear: both;
  content: "";
  display: table;
}
#page {
  max-width: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}
#page {
  -webkit-box-shadow: 0 0 1px 0 rgba(34, 34, 34, .3);
  -moz-box-shadow: 0 0 1px 0 rgba(34, 34, 34, .3);
  box-shadow: 0px 0px 1px 0px rgba(34, 34, 34, 0.3);
}
body {
  margin: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}
body,
button,
input,
optgroup,
select,
textarea {
  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 16px;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.4545;
}
/* @media only screen and (min-width:1025px) */

body,
button,
input,
optgroup,
select,
textarea {
  font-size: 22px;
  font-size: 1.37rem;
}
body {
  background-color: #444;
}
body,
button,
input,
optgroup,
select,
textarea {
  color: #222;
}
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  overflow-y: scroll;
}
html {
  font-size: 16px;
}
html {
  margin-top: 80px !important;
}
.grid {
  margin: 0 auto;
  padding-left: 0px;
  max-width: 1230px;
}
.row {
  clear: both;
}
.grid::after,
.row::after {
  clear: both;
  content: "";
  display: table;
}
.column {
  float: left;
  padding-right: 0px;
}
.twelve,
.eleven,
.ten,
.nine,
.eight,
.seven,
.six,
.five,
.four,
.three,
.two,
.one {
  width: 100%;
}
/* @media only screen and (min-width:800px) */

.three {
  width: 25%;
  width: -webkit-calc((100% / 12) * 3);
  width: calc((100% / 12) * 3);
}
#front-page-blog .three {
  clear: both;
  float: left;
  overflow: hidden;
  font-family: "Source Sans Pro", sans-serif;
  margin-bottom: 1.5em;
  width: 100%;
}
/* @media only screen and (min-width:1025px) */

#front-page-blog .three,
#front-page-blog .grid-sizer {
  width: 25%;
}
/* @media only screen and (min-width:640px) */

#front-page-blog .gutter-sizer {
  width: 0px;
}
a {
  cursor: pointer;
  text-decoration: underline;
}
a {
  background-color: transparent;
  color: #222;
}
#front-page-blog a {
  text-decoration: none;
}
#front-page-blog a {
  color: inherit;
}
#page > header a,
#page > section a,
#page > div a,
#page > footer a {
  -webkit-transition: all .1s linear;
  -moz-transition: all .1s linear;
  -o-transition: all .1s linear;
  transition: all .1s linear;
}
#front-page-blog .three > a {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  display: block;
  padding-bottom: .1em;
}
#front-page-blog .three > a {
  border-bottom-color: rgba(34, 34, 34, 0.1);
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
address,
form,
fieldset {
  margin-top: 2.5em;
  margin-bottom: 2.5em;
}
h1,
h1 a,
h2,
h2 a,
h3,
h3 a,
h4,
h4 a,
h5,
h5 a,
h6,
h6 a {
  clear: both;
  font-family: "Playfair Display", serif;
  font-weight: bold;
  line-height: 1.25;
}
h1 {
  font-size: 1.68em;
}
#front-page-blog .three .entry-title {
  /*.entry-title edits the picture caption font */
  font-family: "Playfair Display", serif;
  font-weight: normal !important;
  margin: 0;
  font-size: 18px;
}
#front-page-blog .three .entry-title {
  font-size: 16px;
  font-weight: 600;
}
#front-page-blog .three .entry-meta {
  /*.entry-meta edits the date font */
  font-size: 14px;
}
#front-page-blog .three .entry-meta {
  font-size: 14px;
}
#front-page-blog .three .entry-title,
#front-page-blog .three .entry-meta {
  display: block;
}
img {
  border: 0;
  height: auto;
  max-width: 100%;
}
#front-page-blog .featured-image img {
  display: block;
}
#front-page-blog .three > a:hover {
  /*a:hover edits the effect of mousing over images */
  border-bottom-color: #222;
  -webkit-box-shadow: 0 1px 0 #222;
  -moz-box-shadow: 0 1px 0 #222;
  box-shadow: 0px 1px 0px #222;
}
#front-page-blog .three > a:hover .featured-image {
  opacity: 0.9;
  /*Edits how faded gallery images turns as you mouse over them */
}
#front-page-blog .banner {
  /*Edits banner size, styling, and positioning */
  font-family: "Playfair Display", serif;
  clear: both;
  width: 100%;
  font-size: 32px;
  /*Edits 'Update' font size, no noticeable effect past 35px */
  margin-bottom: 1.8em;
  font-style: italic;
}

<!DOCTYPE html>
<html class="js" lang="en">
<body class="home page page">
  <div class="hfeed site" id="page">
    <section id="front-page-blog">
      <div class="grid">
        <div class="row">
          <div class="twelve column banner">
            <a href="https://thurstoncdblog.wordpress.com/updates/">Updates</a> 
          </div>
          <!-- .banner -->
        </div>
        <!-- .row -->
        <div class="row posts" style="height: 592.56px; position: relative;">
          <div class="grid-sizer"></div>
          <div class="gutter-sizer"></div>
          <div class="three column post-1" style="left: 0px; top: 0px; position: absolute;">
            <a href="https://thurstoncdblog.wordpress.com/friends/">
              <div class="featured-image">
                <img width="1024" height="768" class="attachment-photo" alt="12178071_484580551721878_1874327697_n" src="https://thurstoncdblog.files.wordpress.com/2016/09/12178071_484580551721878_1874327697_n.jpg?w=1024&amp;h=768&amp;crop=1" scale="0">
              </div>
              <!-- .featured-image -->

              <div>
                <h1 class="entry-title">Friends</h1>
                <span class="entry-meta">
                                                                                                June 19, 2015
                                                                                        </span>
              </div>
            </a>
          </div>
          <!-- .three -->
          <div class="three column post-2" style="left: 300px; top: 0px; position: absolute;">
            <a href="https://thurstoncdblog.wordpress.com/work/">
              <div class="featured-image">
                <img width="1024" height="768" class="attachment-photo" alt="ss-green-planting-on-deschutes-at-barden-propoerty-4-22-09-10-400x300" src="https://thurstoncdblog.files.wordpress.com/2016/09/ss-green-planting-on-deschutes-at-barden-propoerty-4-22-09-10-400x300.jpg?w=1024&amp;h=768&amp;crop=1"
                scale="0">
              </div>
              <!-- .featured-image -->

              <div>
                <h1 class="entry-title">Work</h1>
                <span class="entry-meta">
                                                                                                July 19, 2015
                                                                                        </span>
              </div>
            </a>
          </div>
          <!-- .three -->
          <div class="three column post-3" style="left: 600px; top: 0px; position: absolute;">
            <a href="https://thurstoncdblog.wordpress.com/house/">
              <div class="featured-image">
                <img width="1024" height="768" class="attachment-photo" alt="service-day-wss-green-at-bentley-farm-1-2009-016-17-400x300" src="https://thurstoncdblog.files.wordpress.com/2016/09/service-day-wss-green-at-bentley-farm-1-2009-016-17-400x300.jpg?w=1024&amp;h=768&amp;crop=1"
                scale="0">
              </div>
              <!-- .featured-image -->

              <div>
                <h1 class="entry-title">House</h1>
                <span class="entry-meta">
                                                                                                February 19, 2016
                                                                                        </span>
              </div>
            </a>
          </div>
          <!-- .three -->
          <div class="three column post-4" style="left: 900px; top: 0px; position: absolute;">
            <a href="https://thurstoncdblog.wordpress.com/reflections/">
              <div class="featured-image">
                <img width="1024" height="768" class="attachment-photo" alt="img_7178" src="https://thurstoncdblog.files.wordpress.com/2016/07/img_7178.jpg?w=1024&amp;h=768&amp;crop=1" scale="0">
              </div>
              <!-- .featured-image -->

              <div>
                <h1 class="entry-title">Reflections</h1>
                <span class="entry-meta">
                                                                                                May 19, 2016
                                                                                        </span>
              </div>
            </a>
          </div>
          <!-- .three -->
          <div class="three column post-5" style="left: 0px; top: 296px; position: absolute;">
            <a href="https://thurstoncdblog.wordpress.com/crops/">
              <div class="featured-image">
                <img width="1024" height="768" class="attachment-photo" alt="p1090841" src="https://thurstoncdblog.files.wordpress.com/2016/09/p1090841.jpg?w=1024&amp;h=768&amp;crop=1" scale="0">
              </div>
              <!-- .featured-image -->

              <div>
                <h1 class="entry-title">Crops</h1>
                <span class="entry-meta">
                                                                                                June 19, 2016
                                                                                        </span>
              </div>
            </a>
          </div>
          <!-- .three -->
          <div class="three column post-6" style="left: 300px; top: 296px; position: absolute;">
            <a href="https://thurstoncdblog.wordpress.com/shovels/">
              <div class="featured-image">
                <img width="1024" height="768" class="attachment-photo" alt="shovels" src="https://thurstoncdblog.files.wordpress.com/2016/09/shovels.jpg?w=1024&amp;h=768&amp;crop=1" scale="0">
              </div>
              <!-- .featured-image -->

              <div>
                <h1 class="entry-title">Shovels</h1>
                <span class="entry-meta">
                                                                                                July 19, 2016
                                                                                        </span>
              </div>
            </a>
          </div>
          <!-- .three -->
          <div class="three column post-7" style="left: 600px; top: 296px; position: absolute;">
            <a href="https://thurstoncdblog.wordpress.com/barns/">
              <div class="featured-image">
                <img width="1024" height="768" class="attachment-photo" alt="barns" src="https://thurstoncdblog.files.wordpress.com/2016/09/barns.jpg?w=1024&amp;h=768&amp;crop=1" scale="0">
              </div>
              <!-- .featured-image -->

              <div>
                <h1 class="entry-title">Barns</h1>
                <span class="entry-meta">
                                                                                                August 19, 2016
                                                                                        </span>
              </div>
            </a>
          </div>
          <!-- .three -->
          <div class="three column post-8" style="left: 900px; top: 296px; position: absolute;">
            <a href="https://thurstoncdblog.wordpress.com/field/">
              <div class="featured-image">
                <img width="1024" height="768" class="attachment-photo" alt="p1090869" src="https://thurstoncdblog.files.wordpress.com/2016/09/p1090869.jpg?w=1024&amp;h=768&amp;crop=1" scale="0">
              </div>
              <!-- .featured-image -->

              <div>
                <h1 class="entry-title">Field</h1>
                <span class="entry-meta">
                                                                                                September 19, 2016
                                                                                        </span>
              </div>
            </a>
          </div>
          <!-- .three -->
        </div>
        <!-- .row -->
      </div>
      <!-- .grid -->
    </section>
  </div>
</body>

​

下面是WordPress中的视觉问题(在我将HTML和CSS粘贴到它们的相关位置之后)：

问题截图

我将非常感谢社区提供的任何建议、建议或投入。

谢谢。

Answer 1

这是我的问题的答案。概括地说：

感谢Jacob的帮助，我想出了如何用这一行来纠正那些打破div容器的图像：

padding:0 !important; margin: 0 !important

在我的代码的几个例子中。

第二个问题是标题和元数据在每个图像下的填充。因为我正在将我的图库应用到一个现有的WP模板上，所以编辑页眉边距数据会扰乱整个站点。这是你的“级联”样式表。无论如何，在阅读了这个职位之后，我意识到我需要做什么，添加一个带有唯一标识符的第二套完整的标头did (嗯……我说是唯一的，我所做的只是使用" header“)。

下面是我的代码中已经提供的内容(这不仅影响了我的图库代码中的标题，而且影响了整个网站)：

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
address,
form,
fieldset {
margin-top: 2.5em;
margin-bottom: 2.5em;
}

此外，我还需要在样式表中添加以下内容(注意其相似之处)：

#header h1,
#header h2,
#header h3,
#header h4,
#header h5,
#header h6,
#header p,
#header ul,
#header ol,
#header dl,
#header address,
#header form,
#header fieldset {
line-height: 1.05em;
margin-top: .1em;
margin-bottom: .5em;
}

此外，我还应该提到，我在div标识符中包含了所有HTML基本代码：

<div id="header">my code</div>

不管怎么说，那包好了。现在睡觉！