이미지가 인라인 대신 서로 겹쳐서 표시됩니다.

Question

저는 며칠 동안이 작업을 해왔습니다. 내 웹 사이트에서는 이미지가 서로 쌓여서 4 대신 단일 이미지로 보입니다. 또한 텍스트와 같이 페이지의 다른 요소 위에 이미지가 표시됩니다. Dreamweaver에서는 원하는 방식으로 표시되지만 브라우저에서는 위에서 설명한대로 표시됩니다.

내가 원하는 것 : 4 개의 이미지가 페이지 머리글 위에 나란히 표시됩니다. 내가 코드를 편집하고 여기 내 jsFiddle에 대한 링크입니다 : 다음은 CSS를

.images img { 
    display:inline-block; 
    border-color: rgb(191,224,104); 
    border-width: 3px; 
    margin: auto 
} 

EDIT입니다

<center> 
<span class="images"> 
<img src="images/aboutUs/longJumpBoy.jpg" alt="longJumpBoy" longdesc="images/aboutUs/longJumpBoy.jpg"> 
<img src="images/aboutUs/groupPic.jpg" alt="groupPic" width="214" longdesc="images/aboutUs/groupPic.jpg"> 
<img src="images/aboutUs/kidOnTrack.jpg" alt="kidOnTrack" longdesc="images/aboutUs/kidOnTrack.jpg"> 
<img src="images/aboutUs/throwingKids.jpg" alt="throwingKids" longdesc="images/aboutUs/throwingKids.jpg"> 

</span> 

</center> 

    <h1>About Us</h1>   
<br /><br /> 
    <h2>Who are we?</h2> 
<p> 
    The team is a USA Track and Field (USATF) certified running club. We compete locally and nationally. Our athletes are able to train in all disciplines in track and field, but the team is specialized in distance running. Our runners are registered to run in both USATF and Amateur Athletic Union (AAU) league events. 
    <br /> 
    Practices are held primarily on El Paso's East side. 
</p> 
<header> 
    <h2>Mission Statement</h2> 
</header> 

: 다음은 코드입니다 http://jsfiddle.net/JaLb7/. 이제 브라우저의 이미지가 텍스트 위에 표시되지만 그 중 하나만 표시됩니다. 또한 스크롤 할 때 이미지가 페이지와 함께 스크롤되지 않고 오히려 텍스트가 이미지 뒤에서 스크롤됩니다. 내 문제의

이미지 : 이

Answer 1

좋아요, 이것은 아마추어 실수입니다. 내 스타일 시트를 파고 들자면, 고정 된 위치를 가진 스타일 (클래스의 일부가 아님)에 대한 img 태그 정의가 있음을 알았습니다. 우리는 지금 훨씬 나아지고 있습니다.

귀하의 모든 도움과 제안에 감사드립니다. 귀하의 권장 사항에 따라 코드를 정리 했으므로 다른 방법으로도 도움이되었습니다.

Answer 2

당신은 디스플레이, 텍스트 정렬 및 공백 사용할 수 있습니다

귀하의 HTML을

<span class="images"> 
<img src="images/aboutUs/longJumpBoy.jpg" alt="longJumpBoy" longdesc="images/aboutUs/longJumpBoy.jpg"> 
<img src="images/aboutUs/groupPic.jpg" alt="groupPic" width="214" longdesc="images/aboutUs/groupPic.jpg"> 
<img src="images/aboutUs/kidOnTrack.jpg" alt="kidOnTrack" longdesc="images/aboutUs/kidOnTrack.jpg"> 
<img src="images/aboutUs/throwingKids.jpg" alt="throwingKids" longdesc="images/aboutUs/throwingKids.jpg"> 
</span> 

기준의 CSS는 적용

.images { 
display:block; 
text-align:center; 
white-space:nowrap; 
} 

알림,해야합니다. b 정확한 블록 요소라면 <p> 또는 <div> 또는 심지어 <figure>과 같은 블록 요소입니다.

<center>은 margin:auto; 및/또는 text-align:center;을 적용하는 방법을 알게되면 완전히 쓸모가 없어야합니다.