Question

我有以下响应模式：

在演示中，所有块都具有相同的高度，但宽度可以是25％或50％（它在较低分辨率下会发生变化，但在这种情况下不相关）。由于宽度是流动的，为了保持纵横比，我使用了padding hack。我的问题是为双宽度元素设置正确的填充大小。

要计算常规元素的填充，我使用公式x / y中的百分比，其中x是高度，y是基于设计模型的宽度。

要计算双倍大小元素的百分比，我使用公式x /（2 * y + 2 * z），其中z是元素之间的沟槽大小（演示示例中为6px）。

此代码似乎工作正常，直到我开始调整窗口大小和某些点布局中断，因为普通和双倍大小的元素具有不同的高度。我怀疑这是因为浏览器如何计算百分比值。所以我的问题是：是否可以在我的代码中调整计算以始终获得正确的宽高比而不管元素是什么？

相关代码：

HTML

<ul class="u-cf">
  <li class="double"></li>
  <li></li>
  <li></li>
  <li class="double"></li>
  <li></li>
  <li></li>
</ul>

CSS（Sass）

ul {
  margin: 0;
  padding: 6px;
  list-style: none;
  clear: both;
}

li {
  position: relative;
  padding: 6px;
  width: 25%;
  float: left;
  &:before {
    content: "";
    padding-top: percentage(280/405);
    display: block;
    height: 0;
  }
}

.double { 
  width: 50%; 
  &:before {
    padding-top: percentage(280/822); // 2*405px + 2*6px
  }
}

Answer 1

好吧，我不得不调整标记，但是使用内部跨度来使其正常工作。对于边距，我使用了calc函数。

<ul class="u-cf">
    <li class="double"><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
    <li class="double"><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
</ul>

在这里查看笔： http://codepen.io/bekreatief/pen/MYKBgE?editors=110

校正不同尺寸的流体宽度元素的纵横比

1 个答案: