多个div嵌套，可是一直无法实现图中成效，求赐教

多个div嵌套，可是一直无法实现图中效果，求赐教

<div class="content">
<div class="content_1">
<div class="content_11">img</div>
<div class="content_12"></div>
<div class="content_13">img</div>
<div class="content_14"></div>
<div class="content_15">img</div>
<div class="content_16"></div>
</div>
<div class="content_2">
<div class="content_21"></div>
<div class="content_22"></div>
<div class="content_23"></div>
</div>
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>


css代码如下：
.content{
width:836px;
height:854px;
background:#DDDDDD;
margin:0 auto;
}
.content.content_1{
width:398px;
height:494px;
background:#9900FF;
float:left;
}
.content.content_2{
width:398px;
height:494px;
background:#660077;
float:right;
}
是哪里写的不对吗为什么一直无法实现效果图啊
多个div嵌套，可是一直无法实现图中成效，求赐教

------解决思路----------------------
布局没有规划好
只说中间内容部分
首先content整体分为上下两个部分
<div class="content">
      <div class="content_1"></div>
      <div class="content_2"></div>
</div>
然后content_1部分又分左右两部分
<div class="content">
      <div class="content_1">
        <div class="content_1_left"></div>
        <div class="content_1_right"></div>
      </div>
      <div class="content_2"></div>
</div>
接着content_1_left分三层即3个div
<div class="content_1_left">
          <div></div>
          <div></div>
          <div></div>
</div>
然后每层分左右部分就是两个div啦~
<div class="content_1_left">
          <div class="img_1">
              <div></div>
              <div></div>
          </div>
          <div class="img_2"></div>
          <div class="img_3"></div>
</div>
content_1_right部分同理
content_2也应该能明白怎么做了吧~
整体布局贴给你
<div class="content">
      <div class="content_1">
        <div class="content_1_left">
          <div class="img_1">
            <div></div>
            <div></div>
          </div>
          <div class="img_2"></div>
          <div class="img_3"></div>
        </div>
        <div class="content_1_right">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="content_2">
        <div class="content_2_left"></div>
        <div class="content_2_middle"></div>
        <div class="content_2_right"></div>
      </div>
    </div>
最后  还有你写样式时两个类名直接一定要空格 .content /*空格*/ .content_1

多个div嵌套，可是一直无法实现图中成效，求赐教

相关推荐