CSS 모바일 미디어 쿼리에서 이미지 레이아웃 변경하기

Question

내 웹 페이지와 모바일 용 반응 형 CSS 미디어 쿼리에 3 개의 이미지가 나란히 있습니다. 세 번째 이미지가 그 위의 처음 두 개가있는 다음 줄의 가운데에 오게하고 싶습니다 하나는 떠 다니는 것이고, 하나는 떠 다니는 것입니다. 나는 그것을 할 수 없다! 이 CSS는 어떻게 작성합니까?

Answer 1

코드를 공유해야하지만 도움이 될 것입니다.

<div class="main"> 
<div class="image-left"><img src=""></div> 
<div class="image-right"><img src=""></div> 
<div class="image-center"><img src=""></div> 
</div> 

CSS :

당신은 이미지입니다 센터 {마진 - 상단과 조정해야

.main { 
position: relative; 
max-width: 100%; 
} 
.image-left { 
    float: left; 
} 
.image-center { 
    margin-top: 5%; 
    margin-left: 10% ; 
    position: absolute; 
} 

레이아웃에 따라 여백을 왼쪽.

image-left와 image-right 사이에 공백이 필요한 경우 다른 클래스를 추가합니다.