2011-09-24 4 views
1

나는 다음과 같은 몇 가지 텍스트 문자열을 표시하는 #info의 div 요소가 있습니다내 div 콘텐츠가 표시되지 않는 이유는 무엇입니까?

<body> 
    ... 

    <div id="info"> 
     ABCDEFGHIJKLMNOPQRSTUVWXYZ ... 
    </div> 
</body> 

내가 페이지의 하단 중앙에 그것을 배치합니다 #info의 사업부를 CSS 싶습니다를, 그래서했다 다음과 같은 일이 : 위의 CSS와

#info{ 
    width:100px; 
    margin:0px auto; 
} 

의 #info의 사업부는 페이지의 하단 중앙에 있지만 텍스트 문자열의 일부분 만 보여줍니다 (보여주고있다 '...'없이 ' ABCDE .. ').

나는 그것이 어쩌면 때문에 width:100px 모든 텍스트를 표시하는 것만으로는 충분하지 않습니다 생각, 그래서 width:200px로 변경,하지만 난 폭을 증가 후 놀랍게도, 아무것도 모든의 하단 중앙에 표시되지 않았다. 왜?

-------------------- UPDATE ------------------

I #info div 위의 다른 div가있는 경우 이것이 이유라면 CSS 상단의 div 아래에 #info div를 찾는 방법을 묻고 싶습니다.

+0

DIV의 높이를 설정 했습니까? –

+0

정보가 충분하지 않습니다. 어쩌면 데모를 제공 할 수 있습니까? –

+0

표시된 코드에는 아무 것도 없습니다. 그것은 실제 코드입니까? 그렇게 행동하는 실례를 보여줄 수 있습니까? – Guffa

답변

3

가장 좋은 추측은 DIV의 일부가 겹쳐서 숨겨져 있다는 것입니다. 현재 텍스트의 경우 문자와 점 사이의 간격으로 두 번째 줄에 점을 찍습니다. DIV의 해당 부분은 첫 번째 부분이 숨겨진 다른 부분 아래에 표시됩니다. 너비를 200px로 늘리면 모든 것을 한 줄에 넣을 수있을 정도로 넓어지며 모든 것이 사라집니다. clear: both을 추가하여 텍스트가 숨겨져있는 부분 아래로 밀어 넣는 지 확인하십시오. 때로는 테두리를 추가하거나 브라우저 개발자 플러그인에서 요소 개요를 사용하여 상황을 진단하는 데 도움이 될 수 있습니다. 올바른 비행기에 물건을 가지고 있는지 확인하기 위해 Z- 색인도 확인하십시오.

+0

예, 코드에 div 위에 무언가가 표시되어 있으므로이를 나타 내기 위해 '...'을 사용했습니다. #info div 위의 다른 div, CSS 위쪽 div 아래에 #info div 방법 ?? –

1
<html> 
<head> 
<link rel="stylesheet" href="css.css" type="text/css"> 
</head> 
<body> 
    <section> 
    <div id="info1"> 
    asdgfawregawregawregawregawregawregaweg 
    </div> 
    <div id="info2"> 
    asdgfawregawregawregawregawregawregaweg 
    </div> 
    </section> 
</body> 
</html> 

CSS 파일 :

#info1 { 
color: red; 
} 

#info2 { 
width:100px; 
margin:0px auto; 
} 

가 그래서 ... 모두 표시됩니다. 정보가 충분하지 않을 수도 있습니다 ...

관련 문제