2009-09-24 5 views
0

이 부동 div의 텍스트를 한 줄로 입력해야합니다. Firefox에서는이 기능이 정상적으로 작동합니다. IE6에서는이 엉망이 보인다 : 나는이에 명시 적으로 폭을 설정할 수 없습니다너비 : 자동 부동 divs 문제 (IE6)

screen

. 높이를 설정해도 도움이되지 않습니다. 어떤 아이디어라도 제발?

html로 :

<div id="wraper"> 

<div class="draggable"> 
    <p>a main road with fast-travelling traffic</p> 
</div> 

<div class="draggable"> 
    <p>a very large bird, not able to fly</p> 
</div> 

<div class="draggable"> 
    <p>very important</p> 
</div> 

<div class="draggable"> 
    <p>a plant with white berries that feeds on trees</p> 
</div> 

<div class="draggable"> 
    <p>breakfast and lunch combined in one meal</p> 
</div> 

<div class="draggable"> 
    <p>a part of a room used for cooking</p> 
</div> 

과 CSS는 :

#wraper{ 
background: #FAFAFA; 
border: 1px solid #333; 
margin: 0 auto; 
overflow: hidden; 
padding: 20px; 
width: 500px; 
} 
.draggable{ 
background: #F1F7FF; 
border: 1px solid #CAE1FF; 
display: inline; 
float: left; 
margin: 0 5px 5px 0; 
padding: 3px; 
position: relative; 
width: auto; 
height: auto; 
} 
.draggable p{ 
margin: 0; 
padding: 0; 
} 

답변

0
.draggable p { 
    white-space: nowrap; 
} 

당신은 명시 적으로 auto 너비/높이를 필요가 없습니다, 그 기본입니다. 부동 소수점이 인라인되지 않기 때문에 일반적으로 display: inline을 사용하지 않을 것입니다. 그러나 이것이 IE 버그의 해결 방법이라고 생각하십니까? .draggable 클래스에 white-space:nowrap;를 추가

0
  1. 보십시오.

  2. 실패한 경우 특정 지점에서 줄 바꿈을 사용하려면 각 줄에 .draggable의 첫 번째 인스턴스에 clear:left;을 추가하십시오. (? BTW wraper = wrapper)

BTW 당신은 ​​.draggable 클래스와 div을 잃고, 상속을 사용할 수 있습니다 단지 p 태그 스타일 :

#wrapper p { rules here }