반응 형 디자인의 가로 3 개 이미지

Question

유체 리사이징을 사용하여 간단한 이미지 격자를 만드는 방법에 대한 지침이 필요합니다. 제 3면 (약 300px) 정사각형 이미지를 제 1면에 배치하여 너비를 넓히고 창 크기를 조정하거나 볼 때 응답합니다. 화면 크기가 작 으면 세 개의 이미지가 수평을 유지하지만 축소됩니다. 휴대 전화에서 볼 때 세 개의 이미지는 첫 번째가 상단, 중간이 1 초, 마지막 1/3이 스택됩니다.

이미지가 표시 될 수 있지만 CSS에 문제가 있습니다.

<div id="content" class="col-full"> 

<div id="grid"> 

    <a href="http://mywebsite.com/info/"><img src="http://lorempixel.com/320/320"></a> 
    <a href="http://mywebsite.com/about/"><img src="http://lorempixel.com/320/320"></a> 
    <a href="http://mywebsite.com/contact/"><img src="http://lorempixel.com/320/320"></a> 

    </div> 

<style type="text/css"> 
#grid img { 
float: center; 
margin: 25px; 
} 
</style> 

이 NOOB에 대한 조언을드립니다. :-)

Answer 1

"text-align : center;를 사용해보세요. 컨테이너에 "display : inline-block;" 이미지.

해야 할 일.

예 : http://jsfiddle.net/SvR6Z/1/

편집 : 화면을 축소하는 추가 방법.

는 다음 작업을 수행 할 수 있습니다 창 폭 페이지 그것의 응답에 이미지 위치를 변경하려면 :

1. 은 상대적인 크기에 태그를 지정합니다. 예를 들어 "width : 80 %;" 페이지 너비는 항상 상위 컨테이너의 80 %가됩니다 (상위 컨테이너가 본문 인 경우 윈도우 너비의 80 %가됩니다). 기본적으로 블록 레벨 요소의 너비는 100 %입니다. 어떤 값보다 많지 않으려면 max-width 속성을 지정하면됩니다. 요소 : "너비 : 100 %, 최대 너비 : 906px;" 창 크기와 상관없이 항상 960px 이하의 너비를 갖습니다.

2. 모바일 시청자를위한 그리드 및 장식 (예 : 일부 요소 포함)에 대한 자세한 내용을 보려면 oyu가 css 미디어 쿼리 (여기에 대한 자세한 내용은 http://css-tricks.com/6731-css-media-queries/)를 사용할 수 있습니다. 창 너비가 900px 후 이상 701px와 작은 경우 예를 들어, 당신은 페이지에 만 일하게 될 것입니다 이런 식으로 CSS를 링크하는 경우 :

   <link rel='stylesheet' media='screen 
        and (min-width: 701px) 
        and (max-width: 900px)' href='css/medium.css' />