html - 如何创建以下 div？

Question

抱歉，在创建一组 div 作为附加图片时遇到困难..请帮助

http://imgur.com/J8psv

我最大的问题是必须让 div 在父 div 中彼此相邻排列。事实上要进入下一个级别，如果有 200px 的第 5 个 div，那么我希望它自动进入第二行。我知道我需要一些与 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

在列表中执行此操作，然后设置列表本身的样式。来自：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 2

你可以这样做：

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;
}

这是jsfiddle

Answer 3

你可以从这个开始： 小提琴示例

首先是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;
}