左右結構的圖文混排CSS列表

左右結構的圖文混排CSS列表,我們先來看看一張我截的效果圖.

看上面的效果是文字圍繞圖片吧,下面我們來看看css是怎麼實現的吧.

<div id='jimmy'>

                     <dl>

                               <dt class="dt1">右邊圖片效果</dt>

                             <dd>文字內容所要放的地方</dd>

                  </dl>

</div>

布局就是上面這樣了,我們現在來看看css是怎麼寫的吧

.dt1{

height:250px;

float:right;

margin:0px 0px 0px 0px;

}

就這麼幾行代碼我們所要的效果就完成了,有人會問為什麼dd不設定浮動呢?因為dd預設就是向左浮動的所以就不用了.

註明:本站原創轉載請註明 www.111cn.net