当前位置:编程学习 > html/css >>

左右结构的图文混排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.zzzyk.com

补充:Css教程,经典案例 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,