3 열의 표 행 안에 배치 된 것처럼 보이게 위치하는 3 개의 div

Question

이전에는 <table>을 사용하여 내 페이지 레이아웃을 3 개의 부분으로 나눠서 왼쪽 사이드 바, 오른쪽 사이드 바 & 메인 중앙 패널로 분할했습니다. 자, <table>을 남용/오용하는 단점을 배우고 난 후,이 목적을 위해 테이블을 사용하지 않기를 바랍니다. & 행의 3 개 열과 같이 보이게 3 div을 스타일링하려고합니다.

내가 어떻게 같은 행에 3 div을 달성 할 수 있는지에 대한 모든 의견은 높이 평가 될 것입니다.

현재 내 모든 세 div은 하나씩 선형화 된 방식으로 표시됩니다.

Answer 1

어쩌면 뭔가 쉽게, 일에 대해 :

HTML :

<div id="main"> 
    <div>content</div> 
    <div>content</div> 
    <div>content</div> 
</div> 

CSS :

#main{ 
    margin: 0 auto 0 auto; 
    width: 960px; /*just an example*/ 
} 
#main div{ 
    float: left; 
    width: 320px; /* a third of the main width*/ 
} 

나는이 당신을 도움이되기를 바랍니다.

Answer 2

"float : left"속성과 해당 너비에 원하는 크기로 지정하십시오. 가야이 같은

<div id="left-sidebar" style="width:30%;float:left"><!--Left Sidebar--></div> 
<div id="content" style="width:50%;float:left"><!--Content--></div> 
<div id="right-sidebar" style="width:20%;float:left"><!--Right Sidebar--></div> 

Answer 3

뭔가 당신이 시작 :

<div> 
    <div class="column">column one</div> 
    <div class="column">column two</div> 
    <div class="column">column three</div> 
    <div class="last"></div> 
</div> 


.column { float: left; padding: 5px } 
.last { clear: left} 

Here 라이브 예를

Answer 4

입니다

예 (나는이 데모 목적으로 만 사용 인라인 스타일, 알고)

<div class="col1"></div> 
<div class="col2"></div> 
<div class="col3"></div> 
<div class="clear"></div> 

CSS :

.col1 { 
    float:left; 
    width:250px; 
} 

.col2 { 
    float:left; 
    width:600px; 
} 

.col3 { 
    float:left; 
    width:20px; 
} 

.clear { 
    clear:both; 
} 

Answer 5

일반적으로 사이드 바의 너비는 고정되어 있으며 중간 영역은 나머지 공간을 차지합니다. 이를 고려해 볼 때 가장 좋은 방법은 다음과 같습니다.

<style> 
#left { 
    width:200px; 
    float:left; 
} #right { 
    width:200px; 
    float:right; 
} #main { 
    margin:0px 200px; 
} 
</style> 

<div id="container"> 
    <div id="left">content</div> 
    <div id="right">content</div> 
    <div id="main">content</div> 
</div> 

창 크기를 조정하면 모두 잘됩니다.

작업 JSFIDDLE : http://jsfiddle.net/7ayqe/