Html 如何创建以下div？

很抱歉，创建一组div作为附件图片时遇到困难。请帮助

我最大的问题是必须在父div内将div安排在彼此相邻的位置。实际上，要进入下一个级别，如果有第五个div为200px，那么我希望它自动进入第二行。 我知道我需要一些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;
}

---

在列表中执行此操作，然后设置列表本身的样式。发件人：

您可以从以下内容开始：

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

---

您可以这样做：

HTML

---

是JSFIDLE吗？你能把你的东西上传到

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

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

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

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