html - 无论屏幕显示大小如何，一行响应式文本+图像

Question

无论屏幕大小如何，我都想在一行中对齐文本和横幅。请检查下面给出的 fiddle 。
如果我调整结果窗口的大小并使其水平最大，文本和横幅会排成一行，就像我想要的那样。
但是，当我缩小结果窗口并将其变小时，我仍然需要一行中的文本和横幅，而这并没有发生。

在桌面显示器上，我在一行中看到文字 + 所有 3 个横幅，我希望在移动设备上显示相同的内容，其中所有 3 个横幅应该收缩到相同的高度。
(所有三个横幅的宽度都不同，但所有高度都相同:60px。)

fiddle :http://jsfiddle.net/moudzdj5/3/

<div id="tophead">
    <div id="mainhead">
        some text
    </div>

    <div id="banners">
        <img src="http://www.bingobugle.com/images/ex234x60.gif">
        <img src="http://www.chilefoundry.com/wp-content/uploads/468x60banner.jpg">
        <img src="http://www.crossingstv.com/wp-content/uploads/2012/07/120x60.png">
    </div>
</div>

Answer 1

CSS 解决方案:

我找到了一个 CSS 解决方案，前提是您知道所有横幅的宽度。

#tophead {
  width: 100%;
}

#mainhead {
  width: 15%;
}

#ads {
  position: absolute;
  top: 15px;
  right: 0px;
  width: 80%;
}
#ads img {height:auto;}
#ads img#ad1 {width: calc(95% * (234/1170));} /*(adWidth / totalSumWidth)*/
#ads img#ad2 {width: calc(95% * (468/1170));} /*(adWidth / totalSumWidth)*/
#ads img#ad3 {width: calc(95% * (468/1170));} /*(adWidth / totalSumWidth)*/

<div id="tophead">
  <div id="mainhead">
    some text
  </div>

  <div id="ads">
    <img id="ad1" src="http://www.bingobugle.com/images/ex234x60.gif" />
    <img id="ad2" src="http://www.chilefoundry.com/wp-content/uploads/468x60banner.jpg" />
    <img id="ad3" src="http://www.chilefoundry.com/wp-content/uploads/468x60banner.jpg" />
  </div>
</div>

( fiddle :http://jsfiddle.net/nw4f7uh7/ )

这使用 CSS 的 calc() 来计算横幅的宽度，这是我昨天才知道的 CSS 功能:)

#ads img#ad1 {width: calc(95% * (234/1170));}

• 在 calc(...) 之间，您可以使用 +、-、* 执行简单的计算和 /，您可以在其中混合使用 %、px、em 等单位。
• 上面的行使横幅 95% 的父级总宽度乘以 (234/1170)(its_own_width/total_width_of_all_banners).所以基本上，它是总组合宽度的百分比。这就是为什么您需要知道所有相关横幅的确切宽度才能使其正常工作。
• 您需要在 HTML 中为所有横幅提供唯一 ID，因为它们都需要自己的 CSS 宽度规则(#ad1、#ad2、 #ad3).
• 我使用了 95%。理论上这可能是 100%，但横幅之间有一些空间/边距我无法找到其来源，导致最后一个横幅被推到下一行。使用 98%，它们已经排成一行，但是当您缩小窗口时，最后一个会再次被插入。 95% 似乎是一个安全的选择。
• 如果您不喜欢最后一个横幅和由此创建的右侧窗口之间的空间/边距，您可以将 float:right; 添加到 #ads img{} block 。但请注意，横幅现在已镜像；左边的旗帜在右边。因此，您也应该在 HTML 中翻转它。
• 这不适用于 IE8 及以下版本，并且几乎不支持移动平台。

---

JS 解决方案:

如果你想让它在不知道每个横幅的确切宽度的情况下工作，你需要 JavaScript。

(此外，CSS 解决方案似乎存在多平台问题，例如在移动浏览器上......JavaScript 解决方案应该更加一致。)

window.onload = resize;
window.onresize = resize;

function resize() {
  //get a nodeList of all banners
  var banners = document.getElementsByClassName("banner");
  //store total width of all banners together
  var totalBannerWidth = 0;
  for (var i=0; i<banners.length; i++) {
    totalBannerWidth += banners[i].naturalWidth;
  }
  //set new width of each banner
  var containerWidth = document.getElementById("ads").offsetWidth;
  for (var j=0; j<banners.length; j++) {
    banners[j].style.width = 0.95*containerWidth * (banners[j].naturalWidth/totalBannerWidth) +"px";
  }
}

#tophead {width: 100%;}
#mainhead {width: 15%;}

#ads {
  width: 80%;
  position: absolute;
  top: 15px;
  right: 0px;
}
#ads img {width:auto; height:auto;}

<div id="tophead">
  <div id="mainhead">some text</div>

  <div id="ads">
    <img class="banner" src="http://www.bingobugle.com/images/ex234x60.gif" />
    <img class="banner" src="http://www.chilefoundry.com/wp-content/uploads/468x60banner.jpg" />
    <img class="banner" src="http://www.chilefoundry.com/wp-content/uploads/468x60banner.jpg" />
  </div>
</div>

fiddle :http://jsfiddle.net/nw4f7uh7/2/

• JavaScript 代码执行与 CSS 的 calc() 相同的计算，除了它动态检索所有横幅的原始宽度，并使用这些值来缩放横幅。这样，您就不必像在 CSS 中那样手动输入宽度。
• 现在每个横幅都没有单独的 ID，只有一个共享的类名。
• 这是纯 JavaScript，没有 jQuery。但此版本不适用于 IE8 及以下版本。为了更好的跨浏览器兼容性，将代码转换为 jQuery。