并列显示

父div不设置高宽度 (

div默认情况是宽度最大化(100%)、高度最小化，高度随着内容自动伸展；

一般情况做网页的话，大部分都是固定了总体框架宽度的，每个模块的宽度基本上也都是固定的，所以div需要设一下宽度，如果内容也是相对固定不变的，那么也可以设定高度

)

子div设置左浮动与右浮动

<div class="middle">
           <div class="middle_left">
                  <img src="img/pic1.png"/>
                  <div class="cover_left"></div>
                  <div class="cover_right"></div>
           </div>
          <div class="middle_right">
                  <hr/>
                  <p class="About">about</p>
                  <p class="About" style="margin-top:-10px">technologe</p>
                  <p class="detail">About technologe about technologe about technologe</p>
                  <p class="seven">700</p>
                  <p class="num">3.2</p>
                  <p class="text_1">CSS</p>
                  <p class="text_2">cssssccsccscssc</p>
           </div>

</div>

.middle{
margin: 44px;
background: red;
}

.middle_left{
position: relative;
float: left;
}

.middle_right{
position: relative;
float: right;
width: 203px;
height: 300px;
background: #fff;
}

并列显示

原文：http://www.cnblogs.com/aixiuxiu/p/6444941.html