의 float : left 속성

내 웹 페이지에 내가 플로트를 사용하고 있습니다 :의 float : left 속성

[ Home About More ] 
        Text

I : 탐색 모음 버튼 (수평 줄을)은 같은 오른쪽으로 그 이동 후 컨텐츠를하게 떠났다 그것을 원하는 :

[ Home About More ] 
Text

어떤 제안?

출처

2012-10-04 Pats101

이 보이는, 당신은 코드를 게시 할 수 있습니까? – Kyle

당신은 항상 각 div에 대해 하나의 div를 사용하고 두 div를 왼쪽으로 띄우고 두 div의 너비를 주 div의 너비로 맞출 수 있습니다. – macken88

텍스트에 clear 속성을 사용해야합니다. 좋아요 :

.text {clear:left}

출처

2012-10-04 13:19:57

나는 그것을 알고있었습니다, 나는 단지 피곤했습니다! 고마워요! – Pats101

clearfix 솔루션을 사용하여 문제를 해결하십시오.

http://themergency.com/css-clearfix-demystified/

업데이트 : CSS 파일에서 다음을 추가합니다

.clearfix:before, .clearfix:after { content: ""; display: table; } 
.clearfix:after { clear: both; } 
.clearfix { zoom: 1; }

이 그런 다음 HTML에서 떠 요소의 부모 컨테이너에 clearfix 클래스를 추가 할 수 있습니다.

이것은 매우 일반적인 문제입니다

<div class="clearfix"> 
    <ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">More</a></li> 
    </ul> 
</div>

출처

2012-10-04 13:20:01 dspencer

, 나는 그렇게

.clear {clear:both;} 같은 CSS 항목을 정의하는 것이 좋습니다 : 당신의 HTML 마크 업처럼 보이지만 그것은 clearfix 솔루션의 라인을 따라 뭔가 될 것인가 확실하지

그런 다음이 클래스를 삭제해야하는 요소에이 클래스를 추가하거나 단순히이 클래스와 함께 빈 div를 추가하면됩니다.

<div class="clear"></div>

출처

2012-10-04 13:24:28 Wez

이 방법은 문제를 해결하는 "구식"방법이기도합니다.이 방법은 작동하지만 배치/레이아웃 문제를 해결하기 위해 추가 (빈) HTML 마크 업을 추가하는 것은 좋지 않습니다. 모범 사례 IMO로 해결하려면 순수한 CSS 솔루션을 사용해야합니다. – dspencer

빈 마크 업을하는 것이 나쁜 습관이라는 것에 동의하지만 재사용 가능한 클래스는 필요하지 않습니다. – Wez

RE-USABLE CSS 클래스를 사용하는 것이 어떻게 더 효율적이고 모범 사례가되지 않습니까? 불필요한 HTML 태그를 줄이고 여러 번 사용되는 클래스를 사용하고 있습니까? 빈 HTML 태그를 추가하는 것은 비효율적입니다. IMO, 재사용 가능한 클래스가 가장 좋은 방법입니다. – dspencer

또는이 (오버 플로우 트릭)로 작동합니다 : 당신이 clearfix이 필요한 것처럼

<div style="overflow:auto"> 
    <div style="float:left">[ Home </div> 
    <div style="float:left">About </div> 
    <div style="float:left">More ]</div> 
</div> 
Your other text

출처

2012-10-04 13:25:21

의 float : left 속성

답변

관련 문제