Float浮动属性属性的应用（一）
自定义列表标签的图文混排
自定义列表的图文混排分为上图下文和左图右文；
下面是自定义列表的基础结构：
<!-- index.html -->
<body>
<div class="div1">
<dl>
<dt>图片1</dt> <!-- 定义项 -->
<dd>文字</dd> <!-- 描述项 -->
</dl>
<dl>
<dt>图片2</dt>
<dd>文字</dd>
</dl>
<dl>
<dt>图片3</dt>
<dd>文字</dd>
</dl>
</div>
</body>如果是上图下文的话，只需要浮动dl就可以了，下边是CSS样式案例
/*style.css*/
.div1 dl{
float: left;
}如果是左图右文的话，dl、dt、dd都需要浮动，下边是CSS样式案例
/*style.css*/
.div1 dl{
float: left;
}
.div1 dl dd{ /*因为是定义项,所以左浮动*/
float: left;
}
.div1 dl dt{ /*因为是描述项,所以右浮动*/
float: right;
}
扫一扫
2137
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
