이미지의 정렬

나는 이것에 관해 상당히 새로운 것이므로, 이것은 매우 간단한 질문처럼 보일 수 있습니다.이미지의 정렬

나는 내 자신의 페이지를 디자인하기 시작했습니다. 아래 코드는 제가 지금까지의 위치입니다. 보이는 것입니다 어떻게하는지

...

왼쪽 상단 - 내 로고
오른쪽 상단 - 탐색
왼쪽 - 이미지/설명 난에 노력하고 무엇

그리고 내가 멈추고있는 곳에서는 설명이 각 이미지 아래에 완벽하게 정렬되도록하고, 페이지를 가로 질러 오른쪽으로 이동하면 똑같은 일이 발생합니다.

현재 일어나고있는 것은 각 이미지와 설명이 왼쪽에서 페이지의 왼쪽 아래쪽으로 정렬된다는 것입니다.

아래

현재 코드 :

<body> 
    <div class="container"> 
    <a href="#"><img src="#" alt="Title" width="300" height="100" /></a> 
    <div id="navbar"> 
     <ul> 
     <li><a href="#">GALLERY</a></li> 
     <li><a href="#">ABOUT</a></li> 
     <li><a href="#">BLOG</a></li> 
     <li><a href="#">CONTACT</a></li> 
     </ul> 
    </div> 
    <div id="images"> 
     <img src="#" width="300" height="199" alt="name"></div> 
     <div id="descriptions">City</div> 
     <div id="images"> 
     <img src="#" width="300" height="199" alt="name"></div> 
     <div id="descriptions">Model</div> 
     </div> 
    </div> 
</body>

출처

2012-12-19 user1912669

... –

@ chinna_82 표 형식의 데이터가 아닙니다. 표 형식의 데이터에 대해서만 테이블을 사용하십시오. 테이블없이 이것을 수행하는 수십 가지 다른 방법이 있습니다. –

내가 같은 마크 업을 사용하십시오 :

<figure class="images"> 
    <img src="#" width="300" height="199" alt="City"> 
    <figcaption>City</figcaption> 
</figure> 

<figure class="images"> 
    <img src="#" width="300" height="199" alt="Model"> 
    <figcaption>Model</figcaption> 
</figure> 

<figure class="images"> 
    <img src="#" width="300" height="199" alt="Foo"> 
    <figcaption>Foo</figcaption> 
</figure>

그리고 몇 가지 예제 CSS : 테이블을 사용하려고

.images { 
    float: left; 
    width: 300px; 
    min-height: 200px; 
    margin: 0 10px 0 0; 
    background-color: #EEE; /* just to show containers since image scr is blank */ 
} 

.images:last-child { 
    margin-right: 0; 
} 

.images figcaption { 
    text-align: center; 
}

Fiddle

출처

2012-12-19 03:41:46 steveax

그게 좋습니다! 그것은 잘 풀렸다! 정말 고맙습니다. 몇 가지 다른 질문이 있습니다. 1) 왼쪽에 4 장의 사분면을 원한다면 위의 변경 방법은 무엇입니까? 기본적으로 위쪽에는 2 장, 아래에는 2 장의 그림이 있습니다. 2) 왼쪽에 그 사분면이 있고 다른 그림을 뒤집을 때 텍스트를 표시하는 오른쪽에 섹션을 넣고 싶다면 어떻게해야합니까? 3) 첫 번째 이미지와 네비게이션 바가 다른 이미지 주위에있는 흰색 배경색을 어떻게 확장합니까? 나머지는 회색 배경과 흰색 배경이있는 컨테이너를 만들었습니다. – user1912669

@ user1912669 첫 번째 경우,'last-child' 규칙을 제거하고 다음을 추가 할 수 있습니다 :'.images : nth-child (2) {margin-right : 0; }'그리고 floats를 지우는 추가 규칙 :'.images : nth-child (3) {clear : left; }'. 다른 질문은 아마도 새로운 질문으로 가장 잘 처리 될 것입니다. 각각에 대해 간결한 예를 만들고 새로운 질문을 만드십시오. – steveax

이미지의 정렬

답변

관련 문제