5 个响应式浮动 div 在移动/平板电脑视图上未正确对齐 (<992px)答案

【问题标题】：5 responsive floating divs not aligning properly on mobile/tablet view (<992px)5 个响应式浮动 div 在移动/平板电脑视图上未正确对齐 (<992px)
【发布时间】：2017-12-28 07:53:59
【问题描述】：

我的网站页脚中有 5 个并排列表，如下所示：

<div class="row">

  <div class="col-xs-12  footer-links">

    <div class="links">
      <h1 class="title">ABOUT US</h1>
      <ul>
        <li class="link"> <a href="#">About Company</a></li>
        <li class="link"> <a href="#">Legal Documents</a></li>
        <li class="link"> <a href="#">Careers</a></li>
        <li class="link"> <a href="#">Contact Us</a></li>
        <li class="link"> <a href="#">FAQs</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">ACCOUNTS</h1>
      <ul>
        <li class="link"><a href="#">Register</a></li>
        <li class="link"><a href="#">Compare Account Types</a></li>
        <li class="link"><a href="#">Funding Options</a></li>
        <li class="link"><a href="#">Islamic Account</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">INSTRUMENTS</h1>
      <ul>
        <li class="link"> <a href="#">Currencies</a></li>
        <li class="link"> <a href="#">Commodities</a></li>
        <li class="link"> <a href="#">Metals</a></li>
        <li class="link"> <a href="#">Shares</a></li>
        <li class="link"> <a href="#">Bonds</a></li>
        <li class="link"> <a href="#">Indices</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">PLATFORMS</h1>
      <ul>
        <li class="link"> <a href="#">Meta Trader 4</a></li>
        <li class="link"> <a href="#">MT4 Desktop</a></li>
        <li class="link"> <a href="#">MT4 iOS</a></li>
        <li class="link"> <a href="#">MT4 Android</a></li>
        <li class="link"> <a href="#">MT4 Webtrader</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">TRADING TOOLS</h1>
      <ul>
        <li class="link"> <a href="#">Expiration Dates</a></li>
        <li class="link"> <a href="#">Market Hours</a></li>
        <li class="link"> <a href="#">Holiday Calendar</a></li>
        <li class="link"> <a href="#">Economic Calendar</a></li>
      </ul>
    </div>





  </div>

我想发生的是，在任何低于 992 像素的分辨率下，列表将分别占据列的 50%，创建 3 行，每行 2 个列表，除了最后一个（因为我有 5 个列表）

这是我的 sass 代码：（maxMQ 只是一个媒体查询的 mixin，$md-max-width 是 992px）

.footer {
	.links {

		float: left;
		display: inline-block;
		width: calc(100% / 5);

		@include maxMQ($md-max-width) {
			margin-top: 30px;
			width: 50%;
		}

		.title {
			font-size: 14px;
			margin-bottom: 5px;
			padding-bottom: 7px;
			display: inline-block;
			border-bottom: 2px solid $highlight-blue;
		}

		ul {
			margin: 0;
			padding: 0;
			display: block;
		}

		li {
			margin-top: 5px;
			font-size: 13px;

			a {
				color: #ffffff;
				text-decoration: none;
				cursor: pointer;
			}
		}
	}

问题是，当我将分辨率降低到 992 像素（手机/平板电脑）以下时，第三个列表会跳过第二行的一个点。所以它看起来像这样：

第 1 行：列表列表
第 2 行：列表
第 3 行：列表列表

我想要的是：

第 1 行：列表列表
第 2 行：列表列表
第 3 行：列表

我不知道为什么会这样。我确实知道，当我从“链接”div 中删除 ul 时，它可以正常工作。

任何帮助将不胜感激！谢谢！

【问题讨论】：

标签： html css twitter-bootstrap sass responsive

【解决方案1】：

这是由于浮动元素造成的，第一个元素的高度比第二个元素高，它在第二行产生了这个问题。

要解决这个问题，您可以使用 flex 并移除浮动：

.links {
  float: left;
  display: inline-block;
  width: calc(100% / 5);
}

@media all and (max-width:992px) {
  .footer-links {
    display: flex;
    flex-wrap:wrap;
  }
  .links {
    margin-top: 30px;
    width: 50%;
    float: none;
  }
  .title {
    font-size: 14px;
    margin-bottom: 5px;
    padding-bottom: 7px;
    display: inline-block;
    border-bottom: 2px solid $highlight-blue;
  }
  ul {
    margin: 0;
    padding: 0;
    display: block;
  }
  li {
    margin-top: 5px;
    font-size: 13px;
  }
  li a {
    color: #000 text-decoration: none;
    cursor: pointer;
  }
}

<div class="row">

  <div class="col-xs-12  footer-links">

    <div class="links">
      <h1 class="title">ABOUT US</h1>
      <ul>
        <li class="link"> <a href="#">About Company</a></li>
        <li class="link"> <a href="#">Legal Documents</a></li>
        <li class="link"> <a href="#">Careers</a></li>
        <li class="link"> <a href="#">Contact Us</a></li>
        <li class="link"> <a href="#">FAQs</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">ACCOUNTS</h1>
      <ul>
        <li class="link"><a href="#">Register</a></li>
        <li class="link"><a href="#">Compare Account Types</a></li>
        <li class="link"><a href="#">Funding Options</a></li>
        <li class="link"><a href="#">Islamic Account</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">INSTRUMENTS</h1>
      <ul>
        <li class="link"> <a href="#">Currencies</a></li>
        <li class="link"> <a href="#">Commodities</a></li>
        <li class="link"> <a href="#">Metals</a></li>
        <li class="link"> <a href="#">Shares</a></li>
        <li class="link"> <a href="#">Bonds</a></li>
        <li class="link"> <a href="#">Indices</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">PLATFORMS</h1>
      <ul>
        <li class="link"> <a href="#">Meta Trader 4</a></li>
        <li class="link"> <a href="#">MT4 Desktop</a></li>
        <li class="link"> <a href="#">MT4 iOS</a></li>
        <li class="link"> <a href="#">MT4 Android</a></li>
        <li class="link"> <a href="#">MT4 Webtrader</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">TRADING TOOLS</h1>
      <ul>
        <li class="link"> <a href="#">Expiration Dates</a></li>
        <li class="link"> <a href="#">Market Hours</a></li>
        <li class="link"> <a href="#">Holiday Calendar</a></li>
        <li class="link"> <a href="#">Economic Calendar</a></li>
      </ul>
    </div>





  </div>

或者直接移除浮动而不添加 flex，但您需要修复空白问题以使其宽度为 50%：

.links {
  float: left;
  display: inline-block;
  width: calc(100% / 5);
}

@media all and (max-width:992px) {
  .footer-links {
    font-size: 0; /* remove white spaces */
  }
  .links {
    margin-top: 30px;
    width: 50%;
    float: none;
    font-size: initial; /* put back font as initial*/
    vertical-align:top;
  }
  .title {
    font-size: 14px;
    margin-bottom: 5px;
    padding-bottom: 7px;
    display: inline-block;
    border-bottom: 2px solid $highlight-blue;
  }
  ul {
    margin: 0;
    padding: 0;
    display: block;
  }
  li {
    margin-top: 5px;
    font-size: 13px;
  }
  li a {
    color: #000 text-decoration: none;
    cursor: pointer;
  }
}

<div class="row">

  <div class="col-xs-12  footer-links">

    <div class="links">
      <h1 class="title">ABOUT US</h1>
      <ul>
        <li class="link"> <a href="#">About Company</a></li>
        <li class="link"> <a href="#">Legal Documents</a></li>
        <li class="link"> <a href="#">Careers</a></li>
        <li class="link"> <a href="#">Contact Us</a></li>
        <li class="link"> <a href="#">FAQs</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">ACCOUNTS</h1>
      <ul>
        <li class="link"><a href="#">Register</a></li>
        <li class="link"><a href="#">Compare Account Types</a></li>
        <li class="link"><a href="#">Funding Options</a></li>
        <li class="link"><a href="#">Islamic Account</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">INSTRUMENTS</h1>
      <ul>
        <li class="link"> <a href="#">Currencies</a></li>
        <li class="link"> <a href="#">Commodities</a></li>
        <li class="link"> <a href="#">Metals</a></li>
        <li class="link"> <a href="#">Shares</a></li>
        <li class="link"> <a href="#">Bonds</a></li>
        <li class="link"> <a href="#">Indices</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">PLATFORMS</h1>
      <ul>
        <li class="link"> <a href="#">Meta Trader 4</a></li>
        <li class="link"> <a href="#">MT4 Desktop</a></li>
        <li class="link"> <a href="#">MT4 iOS</a></li>
        <li class="link"> <a href="#">MT4 Android</a></li>
        <li class="link"> <a href="#">MT4 Webtrader</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">TRADING TOOLS</h1>
      <ul>
        <li class="link"> <a href="#">Expiration Dates</a></li>
        <li class="link"> <a href="#">Market Hours</a></li>
        <li class="link"> <a href="#">Holiday Calendar</a></li>
        <li class="link"> <a href="#">Economic Calendar</a></li>
      </ul>
    </div>





  </div>

或者您可以简单地为您的元素添加 min-height 以确保它们具有相同的高度：

.links {
  float: left;
  display: inline-block;
  width: calc(100% / 5);
}

@media all and (max-width:992px) {
  .links {
    margin-top: 30px;
    width: 50%;
    min-height:170px; /* adjust this value with want you what*/
  }
  .title {
    font-size: 14px;
    margin-bottom: 5px;
    padding-bottom: 7px;
    display: inline-block;
    border-bottom: 2px solid $highlight-blue;
  }
  ul {
    margin: 0;
    padding: 0;
    display: block;
  }
  li {
    margin-top: 5px;
    font-size: 13px;
  }
  li a {
    color: #000 text-decoration: none;
    cursor: pointer;
  }
}

<div class="row">

  <div class="col-xs-12  footer-links">

    <div class="links">
      <h1 class="title">ABOUT US</h1>
      <ul>
        <li class="link"> <a href="#">About Company</a></li>
        <li class="link"> <a href="#">Legal Documents</a></li>
        <li class="link"> <a href="#">Careers</a></li>
        <li class="link"> <a href="#">Contact Us</a></li>
        <li class="link"> <a href="#">FAQs</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">ACCOUNTS</h1>
      <ul>
        <li class="link"><a href="#">Register</a></li>
        <li class="link"><a href="#">Compare Account Types</a></li>
        <li class="link"><a href="#">Funding Options</a></li>
        <li class="link"><a href="#">Islamic Account</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">INSTRUMENTS</h1>
      <ul>
        <li class="link"> <a href="#">Currencies</a></li>
        <li class="link"> <a href="#">Commodities</a></li>
        <li class="link"> <a href="#">Metals</a></li>
        <li class="link"> <a href="#">Shares</a></li>
        <li class="link"> <a href="#">Bonds</a></li>
        <li class="link"> <a href="#">Indices</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">PLATFORMS</h1>
      <ul>
        <li class="link"> <a href="#">Meta Trader 4</a></li>
        <li class="link"> <a href="#">MT4 Desktop</a></li>
        <li class="link"> <a href="#">MT4 iOS</a></li>
        <li class="link"> <a href="#">MT4 Android</a></li>
        <li class="link"> <a href="#">MT4 Webtrader</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">TRADING TOOLS</h1>
      <ul>
        <li class="link"> <a href="#">Expiration Dates</a></li>
        <li class="link"> <a href="#">Market Hours</a></li>
        <li class="link"> <a href="#">Holiday Calendar</a></li>
        <li class="link"> <a href="#">Economic Calendar</a></li>
      </ul>
    </div>





  </div>

另一个针对您的情况的简单解决方法是使用clear:left 清除每行最后一个元素之后的浮动（但如果您更改逻辑，则需要调整此设置，例如每行 3 个而不是每行 2 个）行）：

.links {
  float: left;
  display: inline-block;
  width: calc(100% / 5);
}

@media all and (max-width:992px) {
  .links {
    margin-top: 30px;
    width: 50%;
  }
  /* Added this code*/
  .links:nth-child(2n+1) {
    clear:left;
  }
  /**/
  .title {
    font-size: 14px;
    margin-bottom: 5px;
    padding-bottom: 7px;
    display: inline-block;
    border-bottom: 2px solid $highlight-blue;
  }
  ul {
    margin: 0;
    padding: 0;
    display: block;
  }
  li {
    margin-top: 5px;
    font-size: 13px;
  }
  li a {
    color: #000 text-decoration: none;
    cursor: pointer;
  }
}

<div class="row">

  <div class="col-xs-12  footer-links">

    <div class="links">
      <h1 class="title">ABOUT US</h1>
      <ul>
        <li class="link"> <a href="#">About Company</a></li>
        <li class="link"> <a href="#">Legal Documents</a></li>
        <li class="link"> <a href="#">Careers</a></li>
        <li class="link"> <a href="#">Contact Us</a></li>
        <li class="link"> <a href="#">FAQs</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">ACCOUNTS</h1>
      <ul>
        <li class="link"><a href="#">Register</a></li>
        <li class="link"><a href="#">Compare Account Types</a></li>
        <li class="link"><a href="#">Funding Options</a></li>
        <li class="link"><a href="#">Islamic Account</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">INSTRUMENTS</h1>
      <ul>
        <li class="link"> <a href="#">Currencies</a></li>
        <li class="link"> <a href="#">Commodities</a></li>
        <li class="link"> <a href="#">Metals</a></li>
        <li class="link"> <a href="#">Shares</a></li>
        <li class="link"> <a href="#">Bonds</a></li>
        <li class="link"> <a href="#">Indices</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">PLATFORMS</h1>
      <ul>
        <li class="link"> <a href="#">Meta Trader 4</a></li>
        <li class="link"> <a href="#">MT4 Desktop</a></li>
        <li class="link"> <a href="#">MT4 iOS</a></li>
        <li class="link"> <a href="#">MT4 Android</a></li>
        <li class="link"> <a href="#">MT4 Webtrader</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">TRADING TOOLS</h1>
      <ul>
        <li class="link"> <a href="#">Expiration Dates</a></li>
        <li class="link"> <a href="#">Market Hours</a></li>
        <li class="link"> <a href="#">Holiday Calendar</a></li>
        <li class="link"> <a href="#">Economic Calendar</a></li>
      </ul>
    </div>





  </div>

【讨论】：

我选择了第二个选项
谢谢，当你提到高度是问题时，我实际上也尝试过，但这给我留下了比我想要的更多的垂直空间
@junior_2969 也添加了第四个 :) 也很简单 ;)

【解决方案2】：

inline-block 自动为元素添加一些边距，我相信大约 4px。所以 50% 加上 4px 将使它超过 100%，向下推元素。尝试改为仅block。

【讨论】：

不，不是这种情况，如果是这样，我们第一行就不会有 2 个元素..这是由于浮动