이동 사업부는 레이아웃

안녕의 바닥 나는 레이아웃을 아래와 같이 한 왼쪽 및이동 사업부는 레이아웃

#divHeader#divHeader#divHeader 

#divleftmenu #divContent 
#divleftmenu #divContent 
#divleftmenu #divContent 
#divleftmenu #divContent 

#divFooter#divFooter#divFooter

Fiddle 만 바닥 글 위 아래로하여 #divleftmenu를 이동하는 미디어 쿼리와 CSS를 사용하는 방법이 있나요 떴다 ?

는

#divHeader#divHeader#divHeader 

#divContent 
#divContent 
#divContent 
#divContent 

#divleftmenu 
#divleftmenu 
#divleftmenu 
#divleftmenu 


#divFooter#divFooter

출처

2012-08-10 davey

당신이 우리에게 jsfiddle을 줄 수 ? 우리의 코드가 당신의 ID에서 어떻게 배열되어 있는지 이해할 수 없다. – Andy

네, 바이올린을 만듭니다. 만약 당신이 아직 모른다면, 링크는 http://jsfiddle.net/ – mtk

입니다. 오케이는 바이올렛을 제공 할 것입니다. – davey

즉, 당신은 당신의 소스 순서를 변경하고 중단 점에서 사이드 바 부동 중지해야합니다. 다만 좋게, 나는 당신을 위해 당신의 부호를 다시 형성했다. 내가 가진 :

제거 불필요한 선언
사용보다 설명적인 선택 이름
청소 공백

Here's your cleaner version :

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>A much nicer version.</title> 
<style type="text/css"> 
#header {height: 50px; background: yellow;} 
#sidebar {float: left; height: 300px; width: 30%; background:blue;} 
#content {float: right; height: 300px; width: 70%; background: #ccc;} 
#footer {height: 50px; background: grey; clear:both;} 

@media only screen and (max-width: 400px) { 
    #sidebar, #content {float: none; width: 100%;} 
} 
</style> 
</head> 
<body> 
<div id="header">Header</div> 
<div id="content">Content</div> 
<div id="sidebar">Sidebar</div> 
<div id="footer">Footer</div> 
</body> 
</html>

출처

2012-08-10 09:45:58

감사하지만 div # left 바로 위에 div #가 표시되지 않습니다. 방금 레이아웃 숙제에 대해 다시 읽었습니다. – davey

@davey, 처음에는 다르게 스타일을 지정할 필요가 있습니다. flood : right;를 추가하십시오. – skip405

을 의미합니다. 나는 그것을 극복하기 위해 내 콘텐츠를 오른쪽으로 띄워야합니다. – davey

이동 사업부는 레이아웃

답변

관련 문제