html - 清除 :both not affecting columns correctly

Question

问题

我的页脚中有四列，每列宽度为 25%。

对于平板电脑，宽度变为 50% - 每行两个。

但是，我无法对齐前两列和后两列。

这是一张显示它们当前外观的图片:

我试图让它们看起来像:

|-------------------|
|         |         |
|    1    |    2    |
|         |         |
|-------------------|
|         |         |
|    3    |    4    |
|         |         |
|-------------------|

我试图通过在较小设备的 CSS 文件中的第二个元素之后附加 clear:both; 来实现这一点。

但是，这不起作用:

div#footer div.wrapper div.column:nth-child(2):after {
  content:'';
  display:block;
  clear:both;
}

代码

div.column { float: left; }

div#footer div.wrapper div.column { width:50%; }

div#footer div.wrapper div.column:nth-child(2):after {
  content:'';
  display:block;
  clear:both;
}

/*For testing purposes... */

div.column {
  background: black;
  color:white;
  border: 1px solid red;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}

<footer><div id="footer">
  <div class="wrapper">
    <div class="column">
      <h4>Important Links</h4>
      <ul>
        <li><a href="index.php">Homepage</a></li>
        <li><a href="./privacy.php">Privacy Policy</a></li>
        <li><a href="./terms.php">Terms of Use</a></li>
      </ul>

      <h4>Social</h4>
      <ul>
        <li><a href="#" target="_blank"><i class="fa fa-twitter fa-fw"></i>Twitter</a></li>
        <li><a href="#" target="_blank"><i class="fa fa-linkedin fa-fw"></i>LinkedIn</a></li>
      </ul>			
    </div>

    <div class="column">
      <p>Lorem Ipsum Dolor Sit Amet</p>				
    </div>

    <div class="column">
      <p>Lorem Ipsum Dolor Sit Amet</p>
    </div>

    <div class="column" style="text-align:right;">
      <p>Lorem Ipsum Dolor Sit Amet</p>
    </div>

    <div style="clear:both;"></div>
  </div>
</div></footer>

   

Answer 1

这个怎么样？

div.column { float: left; }

div#footer div.wrapper div.column { width:50%; }

div#footer div.wrapper div.columnthree {
  clear:both;
}

/*For testing purposes... */

div.column {
  background: black;
  color:white;
  border: 1px solid red;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}

<footer><div id="footer">
  <div class="wrapper">
    <div class="column">
      <h4>Important Links</h4>
      <ul>
        <li><a href="index.php">Homepage</a></li>
        <li><a href="./privacy.php">Privacy Policy</a></li>
        <li><a href="./terms.php">Terms of Use</a></li>
      </ul>

      <h4>Social</h4>
      <ul>
        <li><a href="#" target="_blank"><i class="fa fa-twitter fa-fw"></i>Twitter</a></li>
        <li><a href="#" target="_blank"><i class="fa fa-linkedin fa-fw"></i>LinkedIn</a></li>
      </ul>			
    </div>

    <div class="column">
      <p>Lorem Ipsum Dolor Sit Amet</p>				
    </div>

    <div class="column columnthree">
      <p>Lorem Ipsum Dolor Sit Amet</p>
    </div>

    <div class="column" style="text-align:right;">
      <p>Lorem Ipsum Dolor Sit Amet</p>
    </div>

    <div style="clear:both;"></div>
  </div>
</div></footer>

   

更新1

div.column { float: left; }

div#footer div.wrapper div.column { width:50%; }

div#footer div.wrapper div.column:nth-child(3) {
  clear:both;
}

/*For testing purposes... */

div.column {
  background: black;
  color:white;
  border: 1px solid red;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}

<footer><div id="footer">
  <div class="wrapper">
    <div class="column">
      <h4>Important Links</h4>
      <ul>
        <li><a href="index.php">Homepage</a></li>
        <li><a href="./privacy.php">Privacy Policy</a></li>
        <li><a href="./terms.php">Terms of Use</a></li>
      </ul>

      <h4>Social</h4>
      <ul>
        <li><a href="#" target="_blank"><i class="fa fa-twitter fa-fw"></i>Twitter</a></li>
        <li><a href="#" target="_blank"><i class="fa fa-linkedin fa-fw"></i>LinkedIn</a></li>
      </ul>			
    </div>

    <div class="column">
      <p>Lorem Ipsum Dolor Sit Amet</p>				
    </div>

    <div class="column">
      <p>Lorem Ipsum Dolor Sit Amet</p>
    </div>

    <div class="column" style="text-align:right;">
      <p>Lorem Ipsum Dolor Sit Amet</p>
    </div>

    <div style="clear:both;"></div>
  </div>
</div></footer>