992px

992px

关注
发信
关注(28)粉丝(399)

html - 5个自适应 float div在手机/平板电脑 View 上未正确对齐(<992px)

我的网站页脚中有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时，它可以正常工作。

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

最佳答案

这是由于浮动元素造成的，第一个元素的高度比第二个元素高，并且在第二行上创建了此问题。

html - 5个自适应 float div在手机/平板电脑 View 上未正确对齐(&lt;992px)-LMLPHP



要解决此问题，您可以使用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>





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



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

09-25 16:25
Powered by LMLPHP ©2024 992px 0.027187