3 열 레이아웃 : Divs에 대한 고정 위치

그래서 현재 3 열 사이트 템플릿에서 작업 중이며 SEO 목적으로 div를 재정렬 할 수있었습니다. 내 유일한 문제는 그것이 아직 100 %로드되지 않았을 때 끔찍한 것처럼 보입니다.3 열 레이아웃 : Divs에 대한 고정 위치

이는 아직 완전히 http://i.imgur.com/JgGKzqL.png

100 %로드로드되지 때 보이는 방법입니다 http://i.imgur.com/5RN5IgJ.png

그래서 사업부의 위치 고정을 할 수 있습니까?

HTML :

<div id="wrapper"> 
    <div id="content-wrapper"> 
     <div id="content">I'm first</div> 
     <div id="side_a">I'm second</div> 
    </div> 
    <div id="side_b">I'm third</div> 
</div>

CSS :

#wrapper {width: 800px;margin: 0 auto;} 
#content-wrapper{float: left;} 
#content {width: 400px;float: right;} 
#side_a {width: 200px;float: left;} 
#side_b {float: left;width: 200px;}

개요 : 당신이 다음 #content가 떠

#content-wrapper{float:left; width:600px}

을 설정하면 내가 생각 http://jsfiddle.net/avzLK/

출처

2013-11-25 WebDev

데모의 문제점은 무엇입니까? 모든 DIV 내용을 제거하면, 그들은 정확히 그들이 어디에있을 것으로 예상됩니다 ... –

데모에서는 실제로 문제가 없습니다. 내 문제는 페이지가 아직 완전히로드되지 않은 경우 주 콘텐츠 div가 중앙에 배치되지 않는다는 것입니다. – WebDev

아직 이해가 안되네요. 즉, 템플릿 구조 (예 :'DIV # side_a')를 이미 존재하는 컨테이너에로드하는 대신로드하는 것입니다. 데모에는 주요 쟁점이 없습니다. 즉, 즉시 작성하는 대신 콘텐츠 **를 가져와야합니다. –

#side_a가로드되기 전에도 부모가 600 픽셀 너비임을 알고 있기 때문에 오른쪽에 표시됩니다.

출처

2013-11-25 19:51:20 jplara

고맙습니다! content-wrapper의 너비를 설정하면 문제가 해결되었습니다. – WebDev

3 열 레이아웃 : Divs에 대한 고정 위치

답변

관련 문제