如何創建下面的div？

很抱歉，但在造就了一批DIV作爲連接pic..please幫助如何創建下面的div？

我最大的問題是必須得到並排設置的其他家長的div裏面的div有困難。事實上，要進入一個新的水平，如果有一個200像素的第5格，那麼我希望它會自動進入第二條線。我知道我需要做一些與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; 
}

來源

2012-11-26 calvin12

你可以上傳你有什麼的[的jsfiddle？]（http://www.jsfiddle.net） –

HTTP ：//jsfiddle.net/vEXrw/ – calvin12

你可以像下面這樣做：

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

來源

2012-11-26 19:30:11

在列表中做它然後風格列表本身。來源：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; 
}

來源

2012-11-26 19:07:13 Tony

在這裏使用列表將少於語義。 –

你可以用這個啓動： 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; 
}

來源

2012-11-26 19:14:47 Ibu

如何創建下面的div？

回答

相關問題