2009-10-21 5 views
1

나는 CSS에 익숙하지 않고 다음과 같은 문제를 겪습니다.CSS : 블록 서식 지정. 이상한 높이의 동작 또는 블록 내의 내용으로 높이를 조절하는 방법

3 개의 항목 (실제로는 div 임) 목록을 만들고 추가했습니다. 이미지 제목 및 일부 설명은 각각 안에 있습니다. 모든 것이 좋았습니다. 그 후 다른 블록을 추가해야 할 때까지 ... 그리고 시도한 후에 추가 된 블록이 뉴스 목록을 거의 완전하게 덮고 있는지 조사했습니다. (

여기 코드입니다. 뉴스 목록 + 스타일을 생성하는

// in loop for 3 items 
<div class="newslist"> 
    <a href="{{ item.get_absolute_url }}"> 
    <img src="{% thumbnail item.main_image 230x220 crop %}" alt="{{ item.image_description}}"/> 
    </a> 
    <br /> 
    <a href="{{ item.get_absolute_url }}" class="article_title">{{ item.title }}</a> 
    <p>{{ item.short_description|truncatewords:35}}</p> 
</div> 

스타일 :

.newslist{ 
    display:block; 
    height:auto; 
    width: 22%; 
    float:left; 
    padding: 10px; 
    text-align: left; 

} 

.newslist a{ 
    margin-top:30px; 
    font-size:12px; 
    color: #be1e2d; 
    text-decoration:none; 

} 
.newslist a:hover{ 
    text-decoration:underline; 
} 

.newslist br{ 
    padding: 10px; 

} 

.newslist img{ 
    width:150px; 
    height:140px; 
    text-align: 
    padding: 5px; 
    margin-bottom:20px; 
    border: 1px solid #CCCCCC; 
    background:#f1efef;` 
} 

.newslist p{ 
    font-size:11px; 
} 

.newslist a:hover img{ 
    border: 1px solid blue; 

} 

홈페이지의 전체 코드는 여기에 있습니다 : http://j-in.org.ua

,369 http://img.skitch.com/20091021-d9y2i9h5cpxgk69fji2ue5pcib.png

또한 새로운 블록의 코드는 다음입니다 : 여기

다음과 같은 경우 문제의 스크린 샷입니다 스타일의

<div id="newblock"> 

Text 

</div> 
나는 방금 추가

BG 색상 ...

답변

1

clearing 수레를 사용해보고 도움이되는지 확인하십시오. 또한 페이지가 유효한지 확인하십시오.

+0

당신이 보여준 기사는 저를 도왔습니다 !!! 감사. 나는 앞으로 CSS & HTML의 유효성을 검사하려고 노력할 것입니다. 감사!!! –

1

나는 당신의 문제를 완전히 이해하고 있는지 잘 모르겠습니다. 모든 뉴스리스트를 외부 래퍼로 포장하는 것이 좋습니다. 그런 다음이 아래에 뉴스 박스를 배치하는 것은 사소한 일입니다. 다시 말하지만, 스크린 샷의 오류를 조금 더 잘 설명해 주시겠습니까?

+0

http://img.skitch.com/20091021-bxmwd4g2hssnm6pbu948j1pj81.png 여기 이미지에 세부 정보를 추가했습니다. (float 제거 후 : newslist 클래스 근처에서 왼쪽으로 모든 블록이 행에 표시되지만 높이는 괜찮습니다.) –