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

时间：2016-09-20 01:08:19

标签： javascript jquery html css margins

我正在尝试创建一个动态库，我一直遇到一个代码在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之后）：

Screenshot of issues

如果社区有任何建议，提示或意见，我将不胜感激。

谢谢。

1 个答案:

答案 0 :(得分：0)

这是我的问题的答案。总结一下：

感谢Jacob Goh的帮助，我想出了如何使用这条线纠正破坏div容器的图像：

html2canvas

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

第二个问题是每个图像下标题和元数据周围的填充。因为我将我的图库应用于现有的WP模板，所以编辑标题边距数据会弄乱整个网站。那是＆＃34;级联＆＃34;你的样式表。无论如何，看完之后 this post，我意识到我需要做什么，添加一个带有唯一标识符的辅助完整的标题ID集合（好吧......我说的是唯一的，我所做的只是使用＆＃34;标题＆＃34;。< / p>

以下是我的代码中已有的内容（这不仅影响了我的图库代码中的标题，而且影响了整个网站）：

padding:0 !important; margin: 0 !important

此外我还需要添加到样式表中（请注意相似之处）：

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

另外我应该提一下，我将所有HTML基本代码都包含在div标识符中：

#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;
}

无论如何，那包裹起来了。现在睡觉了！

相关问题
最新问题