clear：两者都没有正确影响列

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

这个怎么样？

＆＃13;

＆＃13;

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

＆＃13;

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

   

＆＃13;

＆＃13;

＆＃13;

更新1

＆＃13;

＆＃13;

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

＆＃13;

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

   

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以这样做： 使用容器进行de line。行容器有两个元素，因此您不需要使用clear:both。

HTML code：

<footer>
    <div id="line-1" class="line">
        <div id="column-1" class="column">1</div>
        <div id="column-2" class="column">2</div>
    </div>
    <div id="line-2" class="line">
        <div id="column-3" class="column">3</div>
        <div id="column-4" class="column">4</div>
    </div>

</footer>

CSS代码：

footer{
    position:absolute;
    width:100%;
    height:400px;

}

.line{
    float:left;
    position:relative;
    width:100%;
    height:200px;
}

.column{
    float:left;
    position:relative;
    width:50%;
    height:200px;
}

#column-1{
    background-color:red;
}

#column-2{
    background-color:blue;
}
#column-3{
    background-color:green;
}
#column-4{
    background-color:yellow;
}

请参阅此示例：https://jsfiddle.net/wtvmybck/

Answer 3

在包装器中将每两个块分组，默认情况下将包装器设置为50％，在较小的屏幕上设置为100％。

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_wrapper {
  float: left;
  width: 100%;
  height: auto;
  overflow: hidden;
}

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_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>

    <div class="column_wrapper">
    <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>

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