CSS Text Over Picture

Question

그림 위에 일부 텍스트 (내 경우에는 날짜)를 삽입하는 데 문제가 있습니다. 나는 많은 해결책을 시도했다 like these 그리고 그 일했다.

하지만 지금은 블로그 게시물의 모든 미리보기 이미지를 타임 라인으로 표시하고 싶습니다.

그래서 문제 중 하나는 이미지 위에 텍스트를 놓으면 다음 사진이 다음 줄로 이동하고 싶지 않기 때문입니다.

그래서 예를 들어 내 페이지의 세부 정보 :

• 콘텐츠 폭 : 100 픽셀 * 100 픽셀

그래서 : 600PX 또는 200 픽셀 화면 또는 장치

썸네일에 따라 달라집니다 600px의 경우 행당 6 개의 그림이 있어야합니다. 200px의 경우 행 당 2 개의 그림이 있어야합니다.

Answer 1

FIDDLE 아래에는 날짜가 맨 위에있는 블로그 게시물의 정렬되지 않은 목록이 있습니다. 그것들은 "섬네일"이라고 부르기 때문에 링크입니다. CSS는 @media 규칙을 이미지 그리드의 중단 점으로 사용합니다. 링크의 .block 클래스는 이미지가 100 % 너비로 설정되고 .block에 의해서만 제한되기 때문에 각 이미지의 너비를 정의합니다. .block의 높이는 이미지의 비율로 정의되므로 크기가 다른 이미지를 넣으면 격자가 깨집니다.

HTML

<ul class="time-line"> 

    <li><a class="block"> 
     <img alt="timeline image" 
     src="http://placehold.it/400x400" /> 

     <h2>42/15/2013</h2> 
    </a></li> 

    <!-- repeat the list items as needed or insert a loop if you are using php or WP or something --> 


</ul> <!-- .time-line --> 

CSS

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

html, body { 
    margin: 0; 
} 

.wrapper { 
    margin: 0 auto; 
    max-width: 80em; 
} 

.time-line { 
    margin: 0; padding: 0; 
    list-style: none; 
} 

h2 { 
    position: absolute; 
    top: 1em; 
    left: 0; 
    background-color: #f06; 
    color: white; 
} 

.block { 
    position: relative; 
    display: inline-block; 
    width: 50%; 
    float: left; 
    border: 1px solid black; 
} 

.block img { 
    display: inline-block; 
    width: 100%; 
    float: left; 
} 


@media (min-width: 30em) { 

    .block { 
     width: 33.333333%; 
    } 

} /* ====================== */ 

@media (min-width: 40em) { 

    .block { 
     width: 25%; 
    } 

} /* ====================== */ 


@media (min-width: 50em) { 

    .block { 
     width: 20%; 
    } 

} /* ====================== */ 


@media (min-width: 60em) { 

    .block { 
     width: 16.666666%; 
    } 

} /* ====================== */