CSS 중심의 div가 나란히 있습니다

Question

다음 페이지가 있습니다.
스타일 :

.featuredcontainer { 

width: 450px; 
height: 700px; 
margin-left: auto; 
margin-right: auto; 
position: relative; 
right: 160px; 
top: 30px; 
border: 1px groove grey; 
} 



.navcontainer 
{ 
margin-left: auto; 
margin-right: -8px; 
position: relative; 
top: 75px; 
height: 600px; 
width: 300px; 
} 

그리고 예를 들어 HTML은 :

<div class="featuredcontainer"> 
content 
</div> 
<div class="lessonnavcontainer"> 
menu 
</div> 

페이지가 표시됩니다. navcontainer는 오른쪽에 있지만 기능 컨테이너 아래에 있습니다. 상대 위치 지정을 사용하여 navcontainer를 이동하면 올바르게 보이지만 페이지 하단에 빈 공간이 있습니다. 나는 무엇을해야합니까?

Answer 1

지금처럼 "래퍼"사업부로 두 개의 div의 서라운드 :

<div id="wrapper"> 
    <div class="featuredcontainer">content</div> 
    <div class="lessonnavcontainer">menu</div> 
</div> 

는 다음을 중앙에,에 여백을 추가 래퍼 :

그런 다음

#wrapper { margin: 0px auto; } 

는 플로트 추가, 두 개의 div를 나란히 할 수 있습니다합니다 : 대한

.featuredcontainer { float: left; } 
.lessonavcontainer { float: left; } 

위해를, 당신은 래퍼에 폭을 선언해야 할 일을 중심으로 :

#wrapper { width: 800px; } 

을

Answer 2

float 속성을 사용하십시오. float를 사용하여 CSS는 div를 서로 옆에 수평으로 배치 할 수 있습니다.

.featuredcontainer { 

width: 450px; 
height: 700px; 
margin-left: auto; 
margin-right: auto; 
position: relative; 
right: 160px; 
top: 30px; 
border: 1px groove grey; 
float: left; 
} 



.navcontainer 
{ 
margin-left: auto; 
margin-right: -8px; 
position: relative; 
top: 75px; 
height: 600px; 
width: 300px; 
float: left; 
} 

그 출발점은 플로트를 왼쪽 또는 오른쪽으로 띄우고 무슨 일이 일어나는 지 확인하십시오. 그것이 정확하게 당신이 그것을 어떻게 바라 볼 때까지 그것을 가진 바이올린.

Answer 3

사이드 바이 사이드를 얻으려면 CSS에 float 속성을 추가해야합니다. 페이지 너비로 크기를 조정하려면 상대 너비를 추가해야합니다. 페이지 중앙에 (수평으로) div를 HTML의 상대적 위치 지정 div 안에 넣어야합니다. 여기는 바이올린입니다. http://jsfiddle.net/Ne5zs/

Answer 4

탐색 컨테이너와 추천 컨테이너를 모두 다른 래퍼 div에 넣습니다.

HTML

<div class='wrapper'> 
    <div class="navcontainer"> 
     menu 
    </div> 
    <div class="featuredcontainer"> 
     content 
    </div> 
</div> 

그리고 모든 상대 위치를 제거. 이와 같은 기본 레이아웃 문제에는 상대 위치 지정을 사용하지 않는 것이 좋습니다. 대신 수레를 사용하십시오. 래퍼의 너비는 고정되어 있어야합니다. 즉, 자동으로 여백 0으로 자동 가운데 맞춤이 가능합니다.

CSS

.wrapper{ 
    width:752px; 
    margin: 0 auto; 
    overflow:auto; 
} 
.featuredcontainer { 
    width: 450px; 
    height: 700px; 
    float:left; 
    border: 1px groove grey; 
} 
.navcontainer{ 
    float:left; 
    height: 600px; 
    width: 300px; 
    background:#ff0; 
} 

JSFiddlehttp://jsfiddle.net/5w5SC/

Answer 5

플로팅 된 객체에 clearfix (there aremanyversions ofthis technique)를 입력해야합니다. margin: 0 auto을 사용하여 포함하는 블록 요소의 가운데에 놓습니다.