在图像之间添加空间

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

我的整个front-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>