다음 div를 만드는 방법은 무엇입니까?

Question

죄송하지만 첨부 pic..please 도움

http://imgur.com/J8psv

내 가장 큰 문제는 부모 div의 내부에 서로 옆에 배치 된 div를 얻을 데 같은 사업부의 그룹을 만드는 데 어려움을 겪고. 실제로 다음 단계로 이동하려면 200px의 다섯 번째 div가 있으면 자동으로 두 번째 줄로 가야합니다. CSS와 관련이 있다는 것을 알고 있습니다. CSS에 정통하지는 않습니다.

.div_main_left { 
    width: 800px; 
     border: 1px solid; 
     height: 600px; 
     float: left; 
     display: table-cell; 
} 

.div_sec_left { 
    width: 200px; 
     border: 1px solid; 
     height: 75px; 
     display: inline; 
     float: left; 
} 

.div_right { 
    width: 250px; 
     border: 1px solid; 
     height: 500px; 
     float: right; 
     display: table-cell; 
} 

Answer 1

당신은 이런 식으로 작업을 수행 할 수 있습니다 :

HTML

<div id="mainwrapper"> 
<div id="leftwrapper"> 
    <div class="topbox"></div> 
    <div class="topbox"></div> 
    <div class="topbox"></div> 
    <div class="topbox"></div> 
    <div id="maincontent"></div> 
</div> 
<div id="rightwrapper"> 
    <div id="topsidebar"></div> 
    <div id="bottomsidebar"></div> 
</div>  
</div> 

CSS

#mainwrapper{ 
width:1050px;  
} 

#rightwrapper{ 
width:250px; 
float:left; 
} 

#leftwrapper{ 
width:800px; 
float:left; 
} 

.topbox{ 
float: left; 
width:196px; 
margin-right:4px; 
height:75px; 
background-color:orange;  
} 

#maincontent{ 
width:100%; 
height:675px; 
background-color:blue; 
clear:both;  
} 

#topsidebar 
{ 
width:100%; 
height:600px; 
background-color:green;  
} 

#bottomsidebar{ 
width:100%; 
height:150px;  
background-color:red; 
} 

Here이있는 jsfiddle

Answer 2

목록에서 수행 한 다음 목록 자체의 스타일을 지정하십시오. 에서 : http://www.alistapart.com/articles/taminglists/

#tabs ul { 
margin-left: 0; 
padding-left: 0; 
display: inline; 
} 

#tabs ul li { 
margin-left: 0; 
margin-bottom: 0; 
padding: 2px 15px 5px; 
border: 1px solid #000; 
list-style: none; 
display: inline; 
} 


#tabs ul li.here { 
border-bottom: 1px solid #ffc; 
list-style: none; 
display: inline; 
} 

Answer 3

이 시작할 수 있습니다 : Fiddle Example

먼저 HTML :

<div id="container"> 
    <div class="big_left"> 
     <div class="float_parent"> 
      <div class="small">200x75</div> 
      <div class="small">200x75</div> 
      <div class="small">200x75</div> 
      <div class="small">200x75</div> 
     </div> 
     <div class="content"> 
      The Content; 
     </div> 
    </div><!-- Big left End --> 

    <div class="big_right"> 
     <div class="right_long"> 
      250x750 
     </div>  
    </div><!-- Big Right End --> 
</div> 

그런 다음 CSS :

#container { 
    width:1065px; 
} 
.big_left { 
    width:810px; 
    float:left; 
} 
.big_right { 
    width:255px; 
    float:left; 
} 
.big_left .float_parent { 
    width:800px; 
} 
.big_left .float_parent .small{ 
    width:200px; 
    height:75px; 
    float:left; 
} 
.big_left .content { 
    clear:both; 
} 
.big_right .right_long { 
    width:250px; 
    height:750px; 
}