Question

我在主体中心的包装内有四列。我需要三列之间的边距，但最后一列右边没有边距。

    .footer-top {
        width :960px ;
        margin : 40px auto 30px ;
        overflow:hidden;
        border:solid;
    }
    
    .column1 , .column2,.column3 ,.column4  {
        float : left ;
        width:20%;
        margin-right:3%;   
    }
    
    .column1 p {
        margin:30px 0;
    } 
    
    .column4:last-child {
        margin-right:0;
    }

    <div class = "footer-top">
                        <div class= "column1">
                            <h4>LITTLE ABOUT US </h4>
                            <p>Et veniam exquisitaque. Ab culpa anim aut senserit, quo appellat coniunctione. 
                             Cernantur amet aliqua</p>
    
                             <div class = "social">
                                <h4>Follow us</h4>
                                 <ul>
                                     <li><a href="#" class="facebook"></a></li>
                                     <li><a href="#" class="twitter"></a></li>
                                     <li><a href="#" class="rss"></a></li>
                                     <li><a href="#" class="vimeo"></a></li>
                                     <li><a href="#" class="dribble"></a></li>
                                     <li><a href="#" class="msn"></a></li>
                                 </ul>
                             </div>
                        </div>
                        <div class = "column2">
                            <h4>ARCHIVES</h4>
                            <ul>
                                <li><a href=" ">March 2016</a></li>
                                <li><a href = " ">February 2012</a></li>
                                <li><a href =" ">January 2016</a></li>
                                <li><a href = " ">December 2016</a></li>
                            </ul>
                        </div>
                        <div class = "column3">
                           <h4>CONTACT US </h4>
                        </div>
                         <div class = "column4"  >
                            <h4>SIGN TO NEWSLETTER</h4>
                         </div>
                  </div>

我是CSS新手，之前没有使用过最后一个子选择器。这似乎不起作用。我假设选择器正在检查.column4是否是HTML中其他column4元素的最后一个兄弟。我的理解是正确的吗？还有什么方法可以在最后一栏的右边没有保证金？

Answer 1

你有两个问题

您可以定位.column4{}或.footer-top div:last-child{}
小数学问题

你有4个元素，每个元素宽度为25％。右边加3％的边距，每个边距为22％。如果删除最后一个itme的右边距，则剩余3％的宽度。这样就可以为每个元素增加0.75％的宽度。因此，每列的宽度为22.75％

.column1,
.column2,
.column3,
.column4 {
  float: left;
  width: 22.75%;
  margin-right: 3%;
}

希望有所帮助：）

＆＃13;

.footer-top {
  width: 960px;
  margin: 40px auto 30px;
  overflow: hidden;
  border: solid;
}

.column1,
.column2,
.column3,
.column4 {
  float: left;
  width: 22.75%;
  margin-right: 3%;
}

.column1 p {
  margin: 30px 0;
}


.footer-top div:last-child {
  margin-right: 0;
 }

＆＃13;

<div class="footer-top">
  <div class="column1">
    <h4>LITTLE ABOUT US </h4>
    <p>Et veniam exquisitaque. Ab culpa anim aut senserit, quo appellat coniunctione. Cernantur amet aliqua</p>

    <div class="social">
      <h4>Follow us</h4>
      <ul>
        <li>
          <a href="#" class="facebook"></a>
        </li>
        <li>
          <a href="#" class="twitter"></a>
        </li>
        <li>
          <a href="#" class="rss"></a>
        </li>
        <li>
          <a href="#" class="vimeo"></a>
        </li>
        <li>
          <a href="#" class="dribble"></a>
        </li>
        <li>
          <a href="#" class="msn"></a>
        </li>
      </ul>
    </div>
  </div>
  <div class="column2">
    <h4>ARCHIVES</h4>
    <ul>
      <li><a href=" ">March 2016</a></li>
      <li><a href=" ">February 2012</a></li>
      <li><a href=" ">January 2016</a></li>
      <li><a href=" ">December 2016</a></li>
    </ul>
  </div>
  <div class="column3">
    <h4>CONTACT US </h4>
  </div>
  <div class="column4">
    <h4>SIGN TO NEWSLETTER</h4>
  </div>
</div>

＆＃13;

Answer 2

您不需要使用：last-child，因为您有最后一列的特定选择器。只需使用：

.column4 {
    margin-right:0;
}

更简单的方法可能是：

HTML：

<div class="footer-top">
    <div class="column">
        <!--column 1 content-->
    </div>
    <div class="column">
        <!--column 2 content-->
    </div>
    <div class="column">
        <!--column 3 content-->
    </div>
    <div class="column">
        <!--column 4 content-->
    </div>
</div>

CSS：

.footer-top {
    width :960px ;
    margin : 40px auto 30px ;
    overflow:hidden;
    border:solid;
}

.column {
    float : left ;
    width:20%;
    margin-right:3%;   
}

.column:last-child {
    margin-right:0;
}

CPR

最后一栏没有保证金

2 个答案: