2016-06-23 5 views
-2

이미지가있는 두 div를 나란히 배치하는 방법은 무엇입니까? div가 나란히 있고 이미지 크기가 화면 크기와 같아 지도록하고 싶습니다. 화면의 크기를 줄이면 이미지의 위치가 다른 것보다 낮아집니다. 아래 html에 대한 CSS는 어떻게됩니까?두 div를 나란히 배치하는 방법

<div class="container"> 
    <div class="wrapper"> 
    <div class="left"> 
     <img src="img1.png" /> 
    </div> 
    <div class="right"> 
     <img src="img2.png" /> 
    </div> 
    </div> 
</div> 
+1

에 오신 것을 환영 앉아 포함 된 요소를 얻기 위해 CSS를 float을 사용할 수 있습니다 ck 오버플로! 최소한이 코드를 직접 작성하려고 할 것으로 예상됩니다. 스택 오버플로는 코드 작성 서비스가 아닙니다. 나는 Google을 통해 또는 SO 검색을 통해 몇 가지 추가 조사를 수행하고 시도해 볼 것을 제안합니다. 문제가 계속되면 ** 코드 **로 돌아와서 시도한 내용과 작동하지 않은 이유를 설명하십시오. –

답변

0

부트 스트랩 그리드를 사용해보십시오. 이런 것이 될 수 있습니다.

<div class="col-sm-12"> 
    <div class="col-sm-6"> 
     <img src="http://www.thebrandbite.com/wp-content/media/2015/07/apple-7.jpg" width="30%"> 
    </div> 
    <div class="col-sm-6"> 
     <img src="https://d3nevzfk7ii3be.cloudfront.net/igi/KRLMkuaBjm5mKDDP" width="30%">  
    </div> 
</div> 

Demo

0

당신은 역에 양쪽에게

.container { 
 
    width: 100%; 
 
} 
 
.left, .right { 
 
    width: 50%; 
 
    float: left; 
 
}
<div class="container"> 
 
    <div class="left"><img src='http://placehold.it/350x150'/></div> 
 
    <div class="right"><img src='http://placehold.it/350x150'/></div> 
 
</div>

Here is a fiddle to show an example of this

관련 문제