세 개의 열과 링크

Question

이것은 이상합니다. 다음과 같은 세 개의 열이있는 "래퍼"가 있습니다. http://d.imagehost.org/view/0543/cssproblem

첫 번째 열은 그림이 있고 두 번째 열은 텍스트이고 세 번째 열은 세 개의 링크가 있습니다. 세 번째 블록에 텍스트 만 있고 링크가없는 경우 (링크 된 그림의 맨 위 참조) 텍스트가 링크 밖으로 나올 때 텍스트가 더 이상 나란히 있지 않습니다 (링크 된 그림의 맨 아래 참조).

코드의 문제점을 이해할 수 없습니다. 세 번째 열의 텍스트는 링크 일 때 어떻게 나란히 놓을 수 있습니까?

CSS :

.wrapper{ 
margin-left: 45px; 
margin-bottom: 4px; 
width: 466px; 
height: 22px; 
} 

.first{ 
width: 22px; 
float: left; 
} 

.second{ 
width: 266px; 
float: left; 
} 

.third{ 
width: 178px; 
float: right; 
} 

p.text1 { 
font-family: lucida sans unicode, sans-serif; 
color: #ffffff; 
font-size: 1.2em; 
text-align: left; 
margin-left: 12px; 
margin-top: 3px; 
} 

p.text2 { 
font-family: lucida sans unicode, sans-serif; 
color: #ffffff; 
font-size: 1em; 
text-align: right; 
} 

a.opt { 
font-family: lucida sans unicode, sans-serif; 
color: #ffffff; 
font-size: 1em; 
text-decoration: none; 
} 

a.opt:visited { 
font-family: lucida sans unicode, sans-serif; 
color: #ffffff; 
font-size: 1em; 
text-decoration: none; 
} 

a.opt:active { 
font-family: lucida sans unicode, sans-serif; 
color: #ffffff; 
font-size: 1em; 
text-decoration: none; 
} 

a.opt:hover { 
font-family: lucida sans unicode, sans-serif; 
color: #ffffff; 
font-size: 1em; 
text-decoration: underline; 
} 

HTML :

<div class="wrapper"> 
<div class="first><img src="image.gif" /> </div> 
<div class="second"><p class="text1">Some text here</p></div> 
<div class="third"><p class="text2"><a class="opt" href="http://">LINK 1</a> | <a class="opt" href="http://">LINK 2</a> | <a class="opt" href="http://">LINK 3</a></p></div> 
</div> 

Answer 1

내 생각 엔 그것은 당신의 .third 클래스의 float: right 선언 점이다. 다음과 같이 CSS를 적용 해보십시오.

.wrapper{ 
margin-left: 45px; 
margin-bottom: 4px; 
overflow: hidden; 
width: 466px; 
height: 22px; 
} 

.first{ 
width: 22px; 
float: left; 
} 

.second{ 
width: 266px; 
float: left; 
} 

.third{ 
width: auto; 
overflow: hidden; 
} 

이렇게하면 오른쪽 플로팅 div가 필요하지 않습니다. 잘하면 충분히 정리해야합니다. 그렇지 않으면 내 대답을 수정합니다.