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

老白 10个月前 368浏览 0评论

 横排图片右侧无空隙最简单方法.png 《: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;}


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

发表评论