Добавить пространство между изображениями

Question

На моей первой странице у меня есть три сообщения подряд, которые распределены по всей ширине страницы. Я хочу добавить прописку 30px влево. Однако моя проблема заключается в том, что в начале каждой строки изображений есть дополнение 30px. Я хочу, чтобы это так, что технический есть только обивка в левой и правой 30px среднего изображения, так что внешние два изображения всегда касаясь конца экрана. Я попытался использовать: first-child, чтобы затем удалить прописку, однако, поскольку у меня есть записи в цикле, это не сработало, и удалено дополнение из всех трех изображений. у кого-нибудь есть решение?

, что он выглядит как ...

<article <?php post_class('col-md-4'); ?>> 
 
       <div class="front-thumbnail-image"><?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?></div></article>

.medium-front-thumbnail { 
 
    max-width: 100%; 
 
height: auto; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    align-items: flex-end; 
 
    display: block; 
 
    float: left; 
 
} 
 
.front-thumbnail-image { 
 
    padding-left: 30px !important; 
 
} 
 

 
.col-md-4 { 
 
    padding: 0 0 0 0 !important; 
 
    margin-bottom: 100px; 
 
    background-color: red; 
 
}

мой весь передний page.php

<?php 
 
/* 
 
* Template Name: 
 
*/ 
 

 
get_header(); 
 
get_template_part ('inc/carousel'); 
 

 
$the_query = new WP_Query([ 
 
    'posts_per_page' => 14, 
 
    'paged' => get_query_var('paged', 1) 
 
]); 
 

 
if ($the_query->have_posts()) { ?> 
 
    <div id="ajax"> 
 
    <?php 
 
    $i = 0; 
 
    while ($the_query->have_posts()) { $the_query->the_post(); 
 

 
     if ($i % 7 === 0) { // Large post: on the first iteration and every 7th post after... ?> 
 
     <article <?php post_class('col-md-12'); ?>> 
 
      <div class="large-front-container"> 
 
<?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?> 
 
       </div> 
 
      <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
 
      <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> 
 
      <div class="front-post-info"> 
 
      <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> 
 
       <?php get_template_part ('front-page-shop'); ?> 
 
           <?php get_template_part('share-buttons'); ?> 
 
       <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> 
 
      </article><?php 
 

 
     } else { // Small posts ?> 
 

 
      <article <?php post_class('col-md-4'); ?>> 
 
       <div class="front-thumbnail-image"><?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?></div> 
 
       <a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a> 
 
       <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> 
 
       <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> 
 
       <?php get_template_part ('front-page-shop'); ?> 
 
           <?php get_template_part('share-buttons'); ?> 
 
       <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> 
 
      </article> 
 
      <?php 
 
     } 
 
     $i++; 
 
    }?> 
 
    </div> 
 
    <?php if(get_query_var('paged') < $the_query->max_num_pages) { 
 
     load_more_button(); 
 
    } 
 
} 
 
elseif (!get_query_var('paged') || get_query_var('paged') == '1') { 
 
    echo '<p>Sorry, no posts matched your criteria.</p>'; 
 
} 
 
wp_reset_postdata(); 
 
get_footer();

Answer 1

вы можете использовать :nth-child(2) целевой средний DIV.

.grid > div:nth-child(2) { 
 
    padding: 0 30px; 
 
} 
 

 

 
.grid > div { 
 
    float: left; 
 
} 
 
.grid { 
 
    background: red; 
 
    overflow: auto; 
 
    display: inline-block; 
 
} 
 
img { 
 
    display: block; 
 
    max-width: 100px; 
 
}

<div class="grid"> 
 
    <div><img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg"></div> 
 
    <div><img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg"></div> 
 
    <div><img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg"></div> 
 
</div>

Answer 2

В коде вы условии, что я могу видеть вас использует Flexbox. В контейнер изображений попытайтесь добавить justify-content: space-between. Это должно только добавить пространство между изображениями.

.front-thumbnail-image { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    background: red; 
 
}

<article class='col-md-4'> 
 
    <div class="front-thumbnail-image"> 
 
    <img src="https://getuikit.com/v2/docs/images/placeholder_600x400.svg" height="120" /> 
 
    <img src="https://getuikit.com/v2/docs/images/placeholder_600x400.svg" height="120" /> 
 
    <img src="https://getuikit.com/v2/docs/images/placeholder_600x400.svg" height="120" /> 
 
    </div> 
 
</article>

Answer 3

Попробуйте это:

.grid img:not(:first-child) , .grid img:not(:last-child) { 
    padding: 0 10px 0 10px; 
} 

Полный код:

img { 
 
     width: 100px; 
 
     height: 100px; 
 
} 
 
.grid { 
 
     background-color: red; 
 
     display: inline-block; 
 
} 
 
.grid img:not(:first-child) , .grid img:not(:last-child) { 
 
     padding: 0 10px 0 10px; 
 
}

<div class="grid"> 
 
      <img src="http://cdn.earthporm.com/wp-content/uploads/2014/10/animal-family-portraits-2__880.jpg"> 
 
      <img src="http://onehdwallpaper.com/wp-content/uploads/2015/07/Abdorble-Animals-Desktop-Wallpapers-Pictures.jpg"> 
 
      <img src="https://s-media-cache-ak0.pinimg.com/originals/b2/1e/c9/b21ec91754d33bb5de86c67c45482e12.jpg"> 
 
      <img src="http://cisnerosnediadistribution.s3.amazonaws.com/media/images/reino_animal_-_trailer_image.png"> 
 
      
 
</div>