간단한 CSS 플로트 문제

텍스트 옆에있는 이미지가 아닌 간단한 문제가 있습니다.간단한 CSS 플로트 문제

마크 업이 같다 :

<div class="footer"> 
    <p>bla bla bla bla</p> 
    <a href="url_here" class="next" title="Next"><span>Next</span></a> 
</div>

CSS는 다음과 같이이다 :

div.footer p { 
    color: #FFF; 
    width: 80%; 
    margin: 0 auto; 
    padding:0; 
    border: 1px solid white; 
} 
div.footer a.next { 
    background-repeat:no-repeat; 
    display: block; 
    float: left; 
    margin-left: 2em; 
    height: 52px; 
    width: 24px; 
    background-image: url('../gfx/arrow-right.jpg'); 
    margin-left: .7em; 
} 
div.footer a.next span { 
    display: none; 
}

단락은 오히려 옆의 여유 공간에 떠있는 것보다, 그 아래 링크를 눌러 할 것으로 보인다. 어떤 아이디어? <p>은 너비가 80 %에 불과하므로 링크를 표시하는 데 많은 공간이 필요합니다.

건배

출처

2010-06-01 Cory Dee

나는 여기에 간단한 부동 소수점 산술 문제를 찾아 왔기 때문에 제목을 분명히했습니다. ;) –

환호, 설명 해줘서 고마워. –

단락은 블록 레벨 요소와 마지막 요소 이후에 새로운 줄에 새로운 줄 될 다음 소자를 강제로 자신을 강제 할 것이다.

왼쪽에 링크가 있으면 (앵커에 부동 : 왼쪽 있음) 단락을 오른쪽으로 움직여보십시오.

는 앵커가 단락의 오른쪽에 떠 단락의 전으로 앵커를 이동하고 float를 넣어하려는 경우

div.footer p{ 
    ... 
    float:right; 
}

이 http://jsfiddle.net/2PXt6/1/

를 참조하십시오 : 오른쪽 anchore 태그에 .

편집 : 가 오른쪽에 닻을 가지려면 먼저 HTML의 앵커을 가지고 플로트 : 당신이 HTML을 변경하지 않으려면 바로 http://jsfiddle.net/2PXt6/4/

를 참조 왼쪽과에 단락을 떠 왼쪽에 앵커. http://jsfiddle.net/2PXt6/5/

출처

2010-06-01 13:29:09

"p"태그에 대한 적절한 동작처럼 들립니다. here을 참조하십시오. 아래 링크를 원하지 않는다면 "p"태그 대신 "div"를 사용하지 않는 것이 어떻습니까? 모든 스타일을 새 div로 전송할 수 있어야합니다.

업데이트 : 아래 HTML이 당신이 말하는 것을 수행 할 것이라고 생각합니다. 단순함을 위해 스타일을 인라인으로 처리 했으므로 CSS 파일로 옮길 수 있습니다.

<div class="footer"> 
    <div style="float:left">bla bla bla bla</div> 
    <a href="url_here" style="float:right" class="next" title="Next">Next</a> 
</div>

출처

2010-06-01 13:32:55

이것은 내가 원한 것에 가장 가까운 것으로 보이지만, 이것은 여전히 링크 wraping으로 남습니다. 의도는 div/단락의 오른쪽 가장자리 인 사용 가능한 공간의 왼쪽에 떠있는 것입니다. –

사실, 난 이런 짓을 했을까 : 당신이 그것을 떠하지 않는 한, 그 후 일이 그 아래 수 있도록

div.footer p { 
    float: left; 
    ... 
}

출처

2010-06-01 13:33:07 Kurucu

p는 블록 레벨 요소입니다.

단락을 떠 다니거나 html 앞에 링크를 넣을 수 있습니다.

출처

2010-06-01 13:33:25 jeroen

간단한 CSS 플로트 문제

답변

관련 문제