CSS : 코드의 콘텐츠 뒤에 떠 다니는 요소

SEO 이유로 내 코드에서 흐리게 처리해야하는 콘텐츠/텍스트 뒤에 떠있는 요소가 있어야합니다. 보통 수레과 같이 수행됩니다 :CSS : 코드의 콘텐츠 뒤에 떠 다니는 요소

CSS :

#menu { 
float: right; 
width: 180px; 
padding: 10px; 
background: #fcc; 
margin: 0 0 15px 15px; 
}

HTML :

<div id="content"><p>This is a long text. Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit. Praesent nec risus. 
Praesent adipiscing aliquet magna. Proin bibendum velit 
vitae tortor. Vestibulum a dui quis urna feugiat viverra. 
Vestinbulum diam dui, ullamcorper in, rhoncus at, facilisis at, 
lorem. Phasellus turpis metus, sodales sit amet, laoreet nec, 
aliquet sit amet, tortor. Vivamus massa orci, gravida sit amet, 
dictum quis, euismod a, est. Aenean pretium facilisis nunc.</p> 
<p>Nulla eros mauris, egestas eget, ullamcorper sed, aliquam ut, 
nulla. Phasellus facilisis eros vel quam. Etiam rutrum turpis 
a nibh. Integer ipsum. Vestibulum lacus diam, varius in, 
blandit non, viverra sit amet, sapien. Sed porta sollicitudin 
nibh. Nam eget metus nec arcu ultricies dapibus.</p></div> 

<p id="menu">This is a right float. Because it's placed below the text in code, 
it also appears that way.</p>

는 기본적으로, 내가 필요 :이 같은 HTML이 필요

<div id="menu">This is a right float. The long text flows around it.</div> 

<div id="content"><p>This is a long text. Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit. Praesent nec risus. 
Praesent adipiscing aliquet magna. Proin bibendum velit 
vitae tortor. Vestibulum a dui quis urna feugiat viverra. 
Vestinbulum diam dui, ullamcorper in, rhoncus at, facilisis at, 
lorem. Phasellus turpis metus, sodales sit amet, laoreet nec, 
aliquet sit amet, tortor. Vivamus massa orci, gravida sit amet, 
dictum quis, euismod a, est. Aenean pretium facilisis nunc.</p> 
<p>Nulla eros mauris, egestas eget, ullamcorper sed, aliquam ut, 
nulla. Phasellus facilisis eros vel quam. Etiam rutrum turpis 
a nibh. Integer ipsum. Vestibulum lacus diam, varius in, 
blandit non, viverra sit amet, sapien. Sed porta sollicitudin 
nibh. Nam eget metus nec arcu ultricies dapibus.</p></div>

그러나 이 HTML은 이전 예제 (HTML 및 CSS)와 유사합니다. 어떻게해야합니까?

부유 요소의 폭은 일정하지만 높이는 변경 될 수 있습니다. 내용은 그것의 주위에 흐른다. 이 방법이 필요한 이유는 떠 다니는 요소가 중요한 텍스트를 포함하지 않고 일반적으로 많은 페이지에서 동일하므로 메뉴의 내용이 코드의 최상 부분에 있어야하기 때문입니다.

출처

2011-05-09 Zdeněk Gromnica

이 최근의 문제는,이 스페이서는 소스에 첫 번째 솔루션은 빈 "스페이서"div 권리를 떠 포함 같은

Wrap text around right floated column where left column appears first in html

수 있으며,이 내용의 폭과 높이에 있어야한다 jQuery를 조금 포함하는 용액을 높이 얻기 위해 링크 - - 우측 될 위치 플로트 스페이서의 상단 위에 실제 메뉴

링크에서 제조 된 JS 바이올린 예 : HERE

출처

2011-05-09 09:09:24 clairesuzy

그게 전부 야! 고정 된 높이가 필요하지만 그 문제를 해결할 수 있습니다. 감사. –

당신을 환영합니다. & 그래, 높이가 필요하지만 예제는 또한 그것을 감지하는 방법을 제공합니다;) – clairesuzy

간단한 다음과 같은 CSS를

#content { 
    float: left; 
    width: 300px; /* put here the width you want */ 
}

데모를 추가 있습니다 http://jsfiddle.net/qTDLr/1/

편집 : 할 #content 및 #menu 폭의 합이 컨테이너의 폭보다 작다는 것을 확인합니다.

출처

2011-05-09 09:07:32

아니요, #menu의 왼쪽에 #content가 있습니다. #content는 #menu를 중심으로 이동해야합니다. 제 질문의 첫 번째 예와 정확히 같아야합니다. –

두 html 마크 업에서 CSS는 #content –

위 또는 아래에서 #menu를 작동 시키거나 이와 비슷한 것을 필요로합니까? http://jsfiddle.net/RyanAdriano/A6p3g/ –

테이블을 사용할 수 있습니다. CSS의 'content before before'문제는 접근성 측면에서 거꾸로 돌아 왔습니다.

출처

2011-06-26 18:13:33 Kevin

CSS : 코드의 콘텐츠 뒤에 떠 다니는 요소

답변

관련 문제