자바 스크립트없이 이것을하고 싶습니다.li의 맨 아래에 맞 춥니 다?
"item"클래스가있는 모든 li을 div # recent의 맨 아래에 정렬하는 방법을 알아낼 수 없습니다. 기본적으로 모든 리튬은 192px입니다. 문제는 각 제품 이미지의 높이가 다르기 때문에 높이가 40px 밖에되지 않으면 텍스트가 옆에있는 것과 다른 위치에 있다는 것입니다.
<div id="recent">
<h2>Recent Items</h2>
<ul>
<li class="item">
<img src="images/product1.png" />
<a href="#">
Product Name Here<br/>
Brand Name Here
</a>
<p>$182.32</p>
</li>
</ul>
</div>
아이디어가 있으십니까?
자신의 이미지를 다른 div처럼 자신의 컨테이너로 감싸고 해당 컨테이너에 특정 높이를 지정하십시오. 당신의 CSS에서
<div id="recent">
<h2>Recent Items</h2>
<ul>
<li class="item">
<div class = "img_wrapper"><img src="images/product1.png" /></div>
<a href="#">
Product Name Here<br/>
Brand Name Here
</a>
<p>$182.32</p>
</li>
</ul>
</div>
, 제공 .img_wrapper 50 픽셀이든의 높이.
문제는 내가 모두 동일한 높이를 가지고 있어도 이미지가 섹션의 상단에 머물러 있다는 것입니다. 모든 단어 (제품명 등)는 완벽하게 정렬되지만 짧은 이미지는 이미지 하단과 제품 이름 사이에 너무 많은 공간이 있기 때문에 이상하게 보입니다. 그 밖의 무엇을 시도해야합니까? – Matthew
문제의 예에 대한 링크를 게시 할 수 있습니까? –
온라인으로 연결하지 않았습니다 (내 컴퓨터에서 개발 중). 나는 위치를 사용하여 바닥에 고정시킬 수 있다고 생각했다 : 절대와 바닥 : 0, 그러나 왼쪽과 오른쪽은 이상하게 보인다 (이미지는 다른 크기 임). 나는 테이블을 사용해야 할 수도 있지만 (나는 큰 NO라는 것을 알고있다.) 그러나 나는 그 밖에 무엇을 해야할지 모른다. – Matthew
CSS를 사용해 보셨습니까? div에서 vertical-align : bottom을 설정하고 line-height & 높이를 같은 값으로 설정 하시겠습니까?
아마도 답변을 제출하기에는 너무 늦었지만 최근에 같은 문제가있었습니다. 해결책은 다음과 같습니다.
<head>
<style>
#recent ul {
list-style-type: none;
font-size: 17px;
} #recent li {
float: left;
} li div {
vertical-align: bottom;
height: 415px;/ *max height */
width: 285px;
display: table-cell;
}
</style>
</head>
<div id="recent">
<ul>
<li><div>
<img src="pic1.jpg" />
<p><a href="#">Product Name Here</a></p>
<p>$182.32</p>
</div></li>
<li><div>
<img src="pic2.jpg" />
<p><a href="#">Product Name Here</a></p>
<p>$182.32</p>
</div></li>
</ul>
</div>
하지만 여전히 div의 높이를 지정해야합니다. display: table-cell 트릭을 수행합니다.
vertical_align은 부모 요소의 선 높이를 기준으로합니다. so
li {height: 100px; line-height:100px}
p {vertical-align:bottom}
이미 가지고있는 CSS 코드를 추가 할 수 있습니까? #recent, ul 및 .item의 경우 특히 그렇습니까? – Beno