我正在尝试制作类似于收购的顶级横幅广告。它总共包含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>最佳答案
您可以使用 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
关于html - 除以 3 个 div 的响应式顶部横幅图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39528941/