이 위치가 작동하지 않는 이유는 무엇입니까?

Question

<article id="l1"> 
    <img class="active_pic" id="a1" src="img/load.gif"/> 
</article> 
<article id="l2"> 
    <img class="active_pic" id="a2" src="img/load.gif"/> 
</article> 
<article id="l3"> 
    <img class="active_pic" id="a3" src="img/load.gif"/> 
</article> 

그래서이 부분은 <article>이 서로 닿기를 바라는 HTML입니다. 그들은 내가 디스플레이로 변경 한 경우에만, 라인에 머물

article{ 
    height:90%; 
    margin:0; 
    padding:0; 
    border:0; 
    text-align:left; 
    display:inline-block; 
} 

문제, 그들은 서로 접촉하지 않는 : 이 내가 CSS에서 만든 것입니다 인라인,하지만 난 표시하려면 : 인라인 블록을하지만, 내가 할 때 너비가 아닌 너비가 100 % 너비를 차지한다.

나는 이것이 불충분 한 질문이지만, 나는 내가 아는 모든 것을 시도했다.

편집 : 그것을 만들기 위해 '화려한'는 왼쪽 그림을 선택로드 할 때

http://kozkincsprogram.hu/clooud/galery.html

내 문제가

Answer 1

를 나타납니다 여기에 내가 할 노력하고있어의 링크입니다 시도

http://jsfiddle.net/PHhdm/

article{ 
    height:90%; 
    margin:0; 
    padding:0; 
    border:0; 
    text-align:left; 
float:left; 
} 
article > img{ 
    border:1px solid red; 
    width:200px; 
    height:200px; 
    display:inline-block; 

} 

Answer 2

대신에 수레를 사용하여 이것을 시도 했습니까? 바이올린 밖으로

article{ 
    height:90%; 
    margin:0; 
    padding:0; 
    border:0; 
    text-align:left; 
    float:left; 
    border:1px solid red; 
} 

확인 : http://jsfiddle.net/WEfPj/

Answer 3

당신이 다른 답변에서 언급 한 바와 같이, 당신은 가능성이 article 요소 float: left 찾고있는 수레

article { float: left; width: //add the width here i.e. 100px; 20%? }

Answer 4

를 사용하여 시도했지만, 이미지에 display: block을 설정하여 article과사이에있는 여분의 공백을 제거 할 수도 있습니다.요소.

article { 
    height:90%; 
    margin:0; 
    padding:0; 
    border:0; 
    text-align:left; 
    float: left; 
} 

article > img { display: block; } 

Answer 5

페이지의 전체 너비보다 작은 공간을 차지하는 이유는 무엇입니까?

3 개 요소를 나란히 배치하려면 약 30 % 너비로 이동하고 여백을 사용하여 균일하게 만듭니다.

하단에는 width이 필요합니다.

CSS3의 calc()도 매우 유용 할 수 있습니다. min-width & max-width도 여기에서 유용 할 수 있습니다.