Question

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

现在，我的右侧横幅div在调整窗口大小时似乎被推到了中心div下面，所以它没有响应。

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

＆＃13;

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

＆＃13;

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

＆＃13;

由于

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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

响应性的顶部横幅图像，由3个div组成

1 个答案: