html - 5 个响应式 float div 在移动设备/平板电脑 View 上未正确对齐(<992 像素)

Question

我的网站页脚中有 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>

我希望发生的是，在任何低于 992px 的分辨率下，每个列表将占据列的 50%，创建 3 行，每行 2 个列表，除了最后一个(因为我有 5 个列表)

这是我的 sass 代码:(maxMQ 只是媒体查询的混合，$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;
			}
		}
	}

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

第 1 行:列表列表
第 2 行: 列表
第 3 行:列表列表

我想要的是:

第 1 行:列表列表
第 2 行:列表列表
第 3 行:列表

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

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

Answer 1

这是由于 float 元素造成的，第一个元素的高度高于第二个元素，它在第二行造成了这个问题。

---

要解决此问题，您可以使用 flex 并移除 float :

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

或者简单地删除 float 而不添加 flex 但你需要修复 white spaces 问题以使其宽度为 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 清除每行最后一个元素之后的 float (但如果您更改逻辑，则需要调整它，例如每行 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>