3 div로 나누어 져있는 반응 탑 배너 이미지

인계와 유사한 상단 배너 광고를 만들려고합니다. 여기에는 총 3 개의 div가 포함됩니다. 왼쪽, 오른쪽 및 센터. 이 3 개의 이미지를 비례 적으로 만들어서 창 크기를 조정할 때 이미지가 깨지지 않도록하는 방법에 대해 궁금합니다.3 div로 나누어 져있는 반응 탑 배너 이미지

바로 지금, 내 오른쪽 배너 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>

출처

2016-09-16 Mister T

당신은 인 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

출처

2016-09-16 10:23:14 thepio

감사합니다! 이것은 나를 많이 도왔다. –

기꺼이 도와 드리겠습니다! – thepio

3 div로 나누어 져있는 반응 탑 배너 이미지

답변

관련 문제