CSS : 아주 간단한 이미지 갤러리

웹 개발을 항상하는 것은 아니지만 CSS를 할 때 내가 상상할 수있는 가장 실망스러운 것입니다. 설명과 함께 이미지를 보유 할 수있는 간단한 클래스를 만들려고합니다. 나는 각각 세 개의 이미지가있는 두 개의 행을 갖고 싶습니다. 아주 간단합니다.CSS : 아주 간단한 이미지 갤러리

다음은 이미지 만 표시하는 코드입니다. 제대로 작동합니다.

img { 
    position: relative; 
    margin: 0 auto; 
    max-width: 650px; 
    padding: 5px; 
    margin: 10px 0 5px 0; 
    border: 1px solid #ccc; 
} 

<h3>Screenshots</h3> 

<p> 
<a href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a> 
<a href="images/img2.png"><img src="images/img2.png" width="200" height="140"></a> 
<a href="images/img3.png"><img src="images/img3.png" width="200" height="140"></a> 
<a href="images/img4.png"><img src="images/img4.png" width="200" height="140"></a> 
<a href="images/img5.png"><img src="images/img5.png" width="200" height="140"></a> 
<a href="images/img6.png"><img src="images/img6.png" width="200" height="140"></a> 
</p> 


<h3>Installation</h3>

이 내가 원하는대로 정확하게 이미지를 보여줍니다 각 행의 세 후 < 페이지에서 패딩> 다음 설치 부분이있다. 같은 사업부에서 이미지 아래에 설명을 얻으려면 내가 div.img하는 CSS에서 IMG을 변경하고 HTM 코드 :

<h3>Screenshots</h3> 

<p> 
<div class="img"> 
    <a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a> 
</div> 
<div class="img"> 
    <a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a> 
</div> 
<div class="img"> 
    <a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a> 
</div> 
<div class="img"> 
    <a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a> 
</div> 
<div class="img"> 
    <a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a> 
</div> 
<div class="img"> 
    <a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a> 
</div> 
</p> 

<h3>Installation</h3>

하나는 결과 웹 페이지가 먼저 IMG과 정확히 일치 될 것입니다 생각했을 것이다 case와 div.img는 동일한 속성을 가지고 있습니다. 그러나 그것은 사실이 아닙니다. 이 코드를 사용하면 각 div가 열의 전체 너비로 확장되고 이미지는 div의 왼쪽에있는 다른 div 아래에 있습니다. http://www.w3schools.com/CSS/css_image_gallery.asp을하지만,이 경우에 나는 아래쪽 여백을 가지고 설치 및 < 페이지를 무시하고, 이미지로 이동 다음 모든 텍스트> 태그를 얻을 :

나는이 코드를 시도했습니다.

출처

2012-07-24 jaho

jsfiddle을 만들어주세요. 나는 모든 것을 당신을 위해 일하게 만들 것입니다. :) – skmasq

http://i.stack.imgur.com/XyURM.jpg –

@Truth는 제가 첫 문장을 읽을 때 정확히 마음에 떠오르는 것을 말합니다! – bfavaretto

간단하게 유지하려면 div를 <span> 요소로 바꾸거나 div에 대해 display: inline을 CSS에 설정하십시오. 이렇게하면 예상대로 동작합니다 (인라인이 아니라 블록 요소). 또한

는 :

당신은 margin: 0 auto 필요하지 않습니다. 블록 요소와 마찬가지로 인라인 요소가 가운데에 배치되지 않습니다.
position: relative을 추가했지만 필요하지는 않습니다. 나중에 absolute 위치를 div 내부의 무언가에 적용하려는 경우가 아니라면. 여기

이러한 두 속성이없는 jsfiddle이며, div에 display: inline에 추가 : http://jsfiddle.net/3BwKY/.

출처

2012-07-24 16:49:44 bfavaretto

이 결과는 또한 jsfiddle에서 이미지 아래에 테두리가 표시됩니다. – jaho

다음 div에서 'display : inline-block'을 사용할 수 있습니다. http://jsfiddle.net/3BwKY/2/ – bfavaretto

실제로 작동했습니다. 감사. – jaho

CSS : 아주 간단한 이미지 갤러리

답변

관련 문제