• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

《:last-child》有间隙的区块/图片横排，右侧去除间隙最简单方法_CSS学习

当前位置：网站建设 > 技术支持

此类情况下，一般每个区块或者图片的间隔，都会使用margin-right: 20px;类似的方法，但最右侧的一个区块/图片要求与显示区域无间隔，这时候最简单的方法就是使用:last-child，意为最后:指定属于其父元素的最后一个子元素.  也就是指定最后一个区块/图片，针对性的设置margin-right: 0; 即可代表去除了最后一个区块的右侧距。

下面看实际案例代码：

HTML代码：

<div class="tool">

    <div class="list">

      <div class="title">快速建站</div>

      <span>一站式建立网站</span><br>

      <a href="#" target="_blank">

      <div class="icon">GO</div>

      </a> <img src="images/icon.png"> </div>

    <div class="list">

      <div class="title">快速建站</div>

      <span>一站式建立网站</span><br>

      <a href="#" target="_blank">

      <div class="icon">GO</div>

      </a> <img src="images/icon.png"> </div>

    <div class="list">

      <div class="title">快速建站</div>

      <span>一站式建立网站</span><br>

      <a href="#" target="_blank">

      <div class="icon">GO</div>

      </a> <img src="images/icon.png"> </div>

    <div class="list">

      <div class="title">快速建站</div>

      <span>一站式建立网站</span><br>

      <a href="#" target="_blank">

      <div class="icon">GO</div>

      </a> <img src="images/icon.png"> </div>

  </div>

CSS代码：

.tool{margin-bottom: 20px; overflow: hidden;}

.tool .list{float: left;margin-right: 20px; /*第一步统一右侧距为20px */

 width: 238px; height: 108px; margin-right: 20px; padding: 10px 20px; border: 1px solid #ededed; overflow: hidden; position: relative}

.tool .list .title{font-size: 18px; margin-top: 16px; color: #000;font-family:"黑体";}

.tool .list:last-child{margin-right: 0;}/*在此使用了  :last-child  并且设置右侧距为0 */

.tool .list span{font-size: 12px; color: #666; overflow: hidden;}

.tool .list a{text-decoration: none;}

.tool .list .icon{ margin-top: 20px; width: 34px; height: 18px; line-height: 18px; text-align: center;

 color: #e63434; border: 1px solid #e63434; border-radius: 12px;

 font-size: 14px;}

.tool .list img{float: right; position: absolute; top: 10px; right: 20px;}

经适用于一行多个区块/图片的情况下，多行以后再分享！

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。