반응하는 두 개의 겹치는 열을 만드는 방법

안녕하세요 여러분, 제가 포토샵에서 만든 디자인을 만드는 방법을 알려줄 수 있습니까? 실제로 col-md-6을 사용하여 두 개의 열을 만들었습니다. 그러나 문제는 div 높이를 만드는 것이 다른 것보다 조금 더 크다는 것입니다. 여기에 내가 반응하는 두 개의 겹치는 열을 만드는 방법

<div class="col-md-6" class="white"> 
    <h1>LOGISTIC</h1> 
</div> 
<div class="col-md-6" class="ship"> 
</div> 
<div class="col-md-6" class="black"> 
    <h1>DELIVERY</h1> 
</div> 
<div class="col-md-6" class="pipe">  
</div> 
<div class="col-md-6" class="white"> 
    <h1>STORAGE</h1> 
</div> 
<div class="col-md-6" class="tank"> 
</div>

CSS에 대해 이야기하고있는 이미지가

.ship{ 
background: url(../img/resources/ship.png); 
} 

.tank{ 
background: url(../img/resources/tank.png); 
} 

.pipe{ 
background: url(../img/resources/pipe.png); 
}

사전에 감사

출처

2016-09-20 jezz

cs에서 언급 한 3 개의 이미지를 모두 포함하십시오. 에스. 해당 이미지의 높이가 div의 높이에 영향을줍니다. –

@AdamScharp 예 편집 된 것을 실제로 추가하는 것을 잊어 버렸습니다. 죄송합니다. – jezz

그것은 하나의 이미지입니다. 별도의 이미지로 ship.png, tank.png 및 pipe.png를 포함하십시오. 해당 이미지 URL이 공개 리소스 인 경우 CSS의 전체 URL을 지정하면됩니다 (이 예제의 경우). –

아래의 모든 클래스에서 height를 지정해야합니다, 내가 여기에 주식을입니다 제발 도와주세요 :

.ship{ 
    height: /*set the height of ship.png*/ 
    background-image: url(../img/resources/ship.png); 
} 

.tank{ 
    height: /*set the height of tank.png*/ 
    background-image: url(../img/resources/tank.png); 
} 

.pipe{ 
    height: /*set the height of pipe.png*/ 
    background-image: url(../img/resources/pipe.png); 
}

출처

2016-09-20 13:20:42

반응하는 두 개의 겹치는 열을 만드는 방법

답변

관련 문제