Имея проблемы с ограничениями поля css и ограничениями div-образа, мне бы понравились советы или советы

Я пытаюсь создать динамическую галерею, и я продолжаю сталкиваться с проблемой, когда код отображается правильно в jsfiddle, но как только я добавлю его в wordpress Я сталкиваюсь с рядом проблем. В основном, поля между названиями изображений и метаданными простираются до нелепой степени, и хотя я уверен, что я использую работоспособное ограничение div, я не должен быть, потому что последнее изображение разбивает его контейнер и беспорядок линия.Имея проблемы с ограничениями поля css и ограничениями div-образа, мне бы понравились советы или советы

Я думаю, что моя проблема может быть частично связана с тем, что у меня нет уникального идентификатора для отделения кода галереи от встроенного стиля темы 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

Я был бы признателен для любых советов, советов или вклада сообщества.

спасибо.

источник

2016-09-20 Cosmo Inclan

Некоторые css на вашем сайте wordpress вызывают это. Попробуйте изменить имя класса затронутых элементов на вашем сайте wordpress, чтобы узнать, исправлено ли это?Убедитесь, что имя класса уникально. –

Я попробую и вернусь к вам. Спасибо за совет! –

Все еще не очень повезло. Единственное, что я вижу как затронутое, - это тег .feature-image. Считаете ли вы, что это требует дополнительных условий оформления? –

Вот ответ на мою проблему. Подводя итог:

Благодаря помощи Якоба Гох, я понял, как исправить изображения, нарушающие их Div контейнеров с использованием линии:

padding:0 !important; margin: 0 !important

в нескольких экземплярах моего кода.

Вторая проблема заключалась в заполнении заголовка и метаданных под каждым изображением. Поскольку я применял мою галерею к существующему шаблону WP, редактирование данных поля заголовка возилось со всем сайтом. Это «каскадные» таблицы стилей для ya. В любом случае, после прочтения this post, я понял, что мне нужно сделать, добавьте вторичный полный набор идентификаторов заголовков с уникальным идентификатором (ну ... Я говорю уникально, все, что я сделал, было использование «заголовка».

что было доступно уже в моем коде (это влияет не только заголовок в моей галерее кода, но влияет на весь сайт):

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

Также я должен упомянуть, я контейнерный мой основной код HTML в идентификаторе сНа:

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

В любом случае, что завернутое то вверх. А теперь спать!

источник

2016-09-20 10:03:57

Имея проблемы с ограничениями поля css и ограничениями div-образа, мне бы понравились советы или советы

ответ

Смежные вопросы