Question

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

在桌面显示器上，我看到一行中的文字+所有3个横幅，我希望在移动设备上显示相同的显示，其中所有3个横幅应以相同的高度缩小。
（所有三个横幅的宽度都不同，但所有高度都相同：60px。）

<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解决方案，前提是你知道所有横幅的宽度。

＆＃13;

#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)*/

＆＃13;

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

＆＃13;

＆＃13; （小提琴：http://jsfiddle.net/nw4f7uh7/ ）

这使用CSS＆＃39; 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）。< / LI>
我使用了95%。从理论上讲，这可能是100%，但是横幅之间有一些空间/边距我无法找到原点，导致最后一个横幅被推到下一行。使用98%时，它们已经排成一行，但是当你使窗口变小时，最后一个会再次被推动。 95%似乎是一个安全的赌注。
如果您不喜欢此处创建的最后一个横幅和右侧窗口之间的空格/边距，则可以将float:right;添加到#ads img{}块。但要注意现在横幅已被镜像;左侧横幅位于右侧。所以你也应该在你的HTML中翻转它。
此不适用于IE8及以下，并且几乎不支持移动平台。

JS解决方案：

如果您希望它在不知道每个横幅的确切宽度的情况下工作，则需要JavaScript。

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

＆＃13;

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";
  }
}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13; 小提琴：http://jsfiddle.net/nw4f7uh7/2/

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

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

1 个答案:

CSS解决方案：

JS解决方案：