在图像之间添加空间

Question

On my front page I have three posts in a row that are spread across the full width of the page. I want to add a padding of 30px to the left. However my problem is then that at the beginning of each row of images there is a padding of 30px. I want it so that technical there is only a padding to the left and right 30px of the middle image, so the outer two images are always touching the end of the screen. I tried using :first-child to then take away the padding, however since I have the posts in a loop it did not work, and removed padding from all three images. Does anyone have a solution?

what it looks like...

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

my entire 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

you can use :nth-child(2) to target the middle 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

On the code you've provided I can see you uses Flexbox. To the container of the images try to add justify-content: space-between . That should only add space between the images.

 .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

Try this :

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

Full code :

 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>