2015-01-11 4 views
0

안녕하세요. DIV 크기에 문제가 있습니다.CSS 크기 조정 고정량

특정 섹션의 특정 클래스에 속한 모든 div가 실제 크기보다 70px 더 큰 이유는 알 수 없습니다. 이 클래스의 div가 300px이거나 800px 인 경우 문제가 발생합니다.

고정 된 값이 없기 때문에 이러한 이유로 나는 어떤 백분율도 사용할 수 없습니다. 높이는 div에있는 텍스트의 양에 따라 다릅니다.

이 오프셋을 어떻게 복구 할 수 있습니까? 나는 심지어 자바 스크립트 또는 비슷한 것을 사용할 수있다.

나는 이미 한 같은 :

마진 - 하단 : -70px;

이 솔루션을 사용하면 이전 기사의 div가 새 제목과 겹칩니다. 제목의 일부를 클릭 할 수 없게 만듭니다.

감사

편집 :이 섹션

나의 현재 CSS가 비어 있습니다.

물론 덕분에 ..

<div class="lcp_catlist"> 
<div class="list_cat_begin_post"> 

     <a href="..."><img ..."></a> 

     <span class="list_cat_post_title_span"> 
      <span class="list_cat_post_data"> 4 gennaio 2015</span> 
      <a href="....">TITLE</a> 
     </span> 

     <div class="list_cat_excerpt"> 
      EXCERPT 
     </div> 
    </div> 
..... [many <div class="list_cat_begin_post">] 

</div> 

.lcp_catlist { 
position: relative; 
top: 10px; 
} 

.list_cat_begin_post { 
} 

.list_cat_post_title_span { 
position: relative; 
top: -95px;`enter code here` 
background: rgba(12, 97, 157, 0.7); 
color: white; 
display: table-cell; 
width: 620px; 
height: 75px; 

}

.list_cat_excerpt { 
position: relative; 
top: -80px; 
bottom: 5px; 
border-bottom: solid; 
border-color: rgb(12, 97, 157); 

} 문제와

스냅 샷! http://i62.tinypic.com/zxn24n.png

[붉은 광장은 존재하지 않아야 공간을 hilight]
+0

예, 가능한 한 가장 간단한 CSS와 HTML 코드를 포함하고 DIV가 있어야한다고 생각하는 높이를 지정하십시오. –

+0

div 크기가 콘텐츠에 따라 다르므로 크기가 다를 수 있습니다. 그래서 고정 된 높이를 지정할 수 없습니다. 나는 그들 모두가 70px 작아야한다고 말할 수 있습니다. –

+0

나는 문제가 어디에서 왔는지 알았다. 그것은 "list_cat_post_title_span"때문입니다. 이 스팬을 추가하여 제목 뒤에 배경을 추가합니다. 그러나이 div를 이미지에 겹치더라도 브라우저는 크기를 주 div에 추가합니다. 크기가 커집니다. 이 행동에 열렬한 방법이 있습니까? –

답변

0

특정 그런 다음 당신이 원하는 것만 큼. 코드를 게시하면 문제가 해독하기가 어렵 기 때문에 무엇이 잘못되었는지 정확하게 말할 수 있습니다.

+1

이것은 답변이 아니라 주석이어야합니다. – Billy

1

추가 된 코드를 본 후 문제의 원인이되는 위치 친척이라고 말합니다. 위치를 지정하기 위해 무언가를 설정하면 문서의 위치가 마치있는 것처럼 유지되고, 그 다음 상대 위치로 이동되어 평상시와 같은 위치로 이동되지만 공간은 그대로 유지됩니다. 스 니펫 (snippet)은 내가 무엇을 의미 하는지를 알기 위해 그린 박스를 아래로 밀었지만 여전히 문서에서 그 위치를 유지하고 있습니다. 여러 스타일에

#box2{width:150px;height:30px;background-color:yellow;} 
 
#box3{width:150px;height:30px;background-color:blue;} 
 
#box4{position:relative;width:150px;height:30px;top:10px;background-color:green;}
<div id="box2">&nbsp;</div> 
 
    <div id="box4">&nbsp;</div> 
 
    <div id="box3">&nbsp;</div>

0

list_cat_post_title_span 클래스, 내가 의심을 중심으로 :

  • 주로, 왜 display: table-cell? 표 셀 레이아웃은 인접한 여러 요소를 셀처럼 보이는 것처럼 만듭니다. 동일한 위젯 및/또는 높이입니다. 그러나 동일한 클래스에서 특정 폭과 높이를 설정하는 경우에는 일관성이없는 것처럼 보입니다. display 스타일을 삭제하는 것이 좋습니다.

  • 또한 top: -95pxposition: relative 스타일을 이해하지 못합니다. 여분의 높이 문제가 여전히 나타나면 시도해보고 시도하십시오.