1
다른 웹 사이트를 다시 포맷하기 위해 사용자 스타일을 작성하고 있습니다 (html을 변경할 기회 없음).웹 사이트의 콘텐츠를 사이드 바 주위로 흐르게하려고합니다.
현재 웹 사이트에는 메인 콘텐츠가 있으며 왼쪽에는 전체 높이의 사이드 바가 있습니다.
저는 CSS를 사용하여 많은 사이드 바 콘텐츠를 제거했으며 메인 콘텐츠가 사이드 바 아래 영역의 너비를 채우기 위해 확장되기를 바랍니다.
내가 HTML 소스를 제어 할 수 있다면 사이드 바를 'float : right'스타일로 먼저 배치 하겠지만 원본을 제어 할 수는 없으며 사이드 바 Div는 메인 콘텐츠 뒤에 있습니다.
전통적으로 이것은 CSS에서 수행 할 수 없었지만 CSS3를 사용하여 지금 할 수 있습니까? 만약 그렇다면 어떻게?
실제로 스타일을 시도 오전 페이지는 this one 같은 트립 어드바이저 포럼 페이지입니다 그러나 그들은 내가 놀이 매우 간단한 웹 페이지를 만든 예제로 사용을 시도 지나치게 복잡 :
<!DOCTYPE html>
<html>
<head>
<style>
#mainbody {border: 2px solid blue;
width: 600px;}
#sidebar {border: 2px solid green;
position: inherit;
float: right;
width: 250px;}
#content {
position: inherit;
width: 550px;}
</style>
</head>
<body>
<div id=mainbody>
<div id=content>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. </p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.</p>
</div>
<div id=sidebar>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. </p>
</div>
</div>
</body>
</html>}
$("#content").insertAfter("#sidebar");
: 컨텐츠 위의 사이드 바으로 난 당신이 할 수 jQuery를 사용하여 원하는 형식
이것은 사이트에 따라 다릅니다. – jacksondc
예. 그것은 할 수 있습니다. 해키하고 엉망진창이지만 사실상 모든 것을 할 수 있도록 메인 컨텐츠를 재 스타일링 할 수 있습니다. 구체적인 단계와 CSS 규칙을 제공하려면 코드를 참조해야합니다. 그렇지 않은 경우 Z- 색인, 폭 및 절대 위치 지정에 대한 가상의 논의가 모두 있습니다. – jdm2112