2011-02-17 5 views
2
<div style="float: left">text1</div> 
<div style="float: right;">text2</div> 
<div class="random_class">text3</div> 

여기에 문제가 있습니다. Random_class는 텍스트 1과 텍스트 2의 맨 위로 이동합니다. 뭐가 잘못 되었 니? 고맙습니다.이 html 코드의 문제점은 무엇입니까?

+2

예상 한 내용과 실제로 보는 내용에 대해보다 자세하게 작성하십시오. –

+1

random_class와 연관된 스타일은 무엇입니까? 어떤? random_class와 관련된 스타일이 없기 때문에 text1과 text2 사이에 text3이 나타날 때 기대할 수 있습니다. – Riggy

+0

일반적으로, 왼쪽에 "text1", 오른쪽에 "text2", 텍스트 1의 오른쪽에 "text3"이 표시됩니다. – jball

답변

12

수하물을 청소해야합니다. 예를 들면 다음과 같습니다.

<div class="random_class" style="clear:both">text3</div> 

또한 여기

.random_class { 
    clear: both 
} 
+0

당신은 천재입니다, 그것은 작동합니다! –

+0

그것은 당신을 위해 일해서 기쁩니다. – Loktar

+0

dammit 저를 이길! –

3

당신이 이동 할 수있는 :

http://jsfiddle.net/q4CqZ/3/

추가 clear:both; 당신이 내용에서 그것을 필요 요소를 떠 때마다

+0

+1 바이올린. – Loktar

+0

@Loktar :-D :) <3 –

2

.random_class에 흐름.

Text1과 Text2는 플로트되어 Text3는 거기에서 보지 않는 것처럼 동작합니다. 수레는 다른 수레를 알고 있습니다. clear:both;을 사용하면 CSS의 왼쪽이나 오른쪽에 아무 것도 없어야한다는 것을 CSS에 알립니다.

관련 문제