除以 3 个 div 的响应式顶部横幅图片答案

【问题标题】：Responsive top-banner image that's devided by 3 divs除以 3 个 div 的响应式顶部横幅图片
【发布时间】：2016-09-16 10:13:45
【问题描述】：

我正在尝试创建一个类似于收购的顶部横幅广告。它总共包含3个div。左，右和一个中心。我想知道如何使这 3 个图像按比例缩放，以便在调整窗口大小时图像不会中断。

现在，在调整窗口大小时，我的右侧横幅 div 似乎被推到了中心 div 的正下方，因此没有响应。

*注意：我已将图像替换为背景色。这是我想要实现的示例： http://fandango.no/wp-content/uploads/2015/09/1412_hestesko_cruise_ncl_skisse02.jpg

 <style>
  * body, html{
    margin: 0;
    padding: 0;
  }
  .left-banner{
    background-color:lightgreen;
    background-repeat: no-repeat;
    width:100%;
    height:700px;
    max-width:180px;
    float: left;

  }
  .right-banner{
    background-color:lightgreen;
    background-repeat: no-repeat;
    width:100%;
    height:700px;
    max-width:180px;
    float:left;
  }
  .center-banner{
    background-color:lightblue;
    background-repeat: no-repeat;
    width:100%;
    max-width:1010px;
    height:150px;
    float:left;
  }
  .banner-container{
    width:100%;
    height:100%;
  }
</style>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>TEST</title>
    <meta name="description" content="X">
    <meta name="author" content="X">
  </head>
  
  <body>
    <div class="banner-container">
      <div class="left-banner"></div>
      <div class="center-banner"></div>
      <div class="right-banner"></div>
    </div>
  </body>
</html>

谢谢

感谢下面的答案，我设法完成了这项工作。中心横幅现在是流动的，同时保持左右横幅的宽度相同。

.left-banner{
    background-color: lightgreen;
    background-repeat: no-repeat;
    height:700px;
    flex: 0 0 180px;
  }
  .right-banner{
    background-color: lightgreen;
    background-repeat: no-repeat;
    height:700px;
    flex: 0 0 180px;
  }
  .center-banner{
    background-color: lightblue;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    max-width:1010px;
    height:150px;
    flex: 0 1 100%;
  }
  .banner-container{
    width:100%;
    height:100%;
    display: flex;
    flex-wrap:nowrap;
  }

<html> 
  <body>
    <div class="banner-container">
      <div class="left-banner"></div>
      <div class="center-banner"></div>
      <div class="right-banner"></div>
    </div>
  </body>
</html>

【问题讨论】：

标签： html css banner banner-ads

【解决方案1】：

你可以使用 flexbox 来做到这一点。

* body,
html {
  margin: 0;
  padding: 0;
}
.left-banner {
  background-color: lightgreen;
  background-repeat: no-repeat;
  flex: 0 1 180px;
  height: 700px;
}
.right-banner {
  background-color: lightgreen;
  background-repeat: no-repeat;
  flex: 0 1 180px;
  height: 700px;
}
.center-banner {
  background-color: lightblue;
  background-repeat: no-repeat;
  flex: 0 1 100%;
  height: 150px;
  max-width: 1010px;
}
.banner-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap:
}

<div class="banner-container">
  <div class="left-banner"></div>
  <div class="center-banner"></div>
  <div class="right-banner"></div>
</div>

基本上你将flex: 0 1 180px;设置在左右横幅上说“不要增长，你可以缩小，你应该尝试180px宽”。并且中心横幅应该填写其余部分。

浏览器对 flexbox 的支持：http://caniuse.com/#search=flexbox

【讨论】：

谢谢！这对我帮助很大。
很高兴能帮上忙！