HTML里的 dl dt dd dd里的文字怎么浮到图片的右边中间怎么浮上去

发布网友发布时间：2022-05-15 20:55

我来回答

共2个回答

热心网友时间：2024-02-27 20:48

我看了一下你的代码，你想要的效果跟你的代码对不上的。

你可以这么分解：一个图片+文字说明是一行

这一行里分2列一列是图片一列是文字全部靠左流动。文字说明又分为2行。

如图：

代码如下：

<html>
<head>
<title>div</title>
<style type="text/css">
.line{
height: 80px;
clear: both;
background-color: #ccc;
padding: 5px;
}

.leftimg{
width: 70px;
height: 70px;
float: left;
background-color: #ddd;
}
.righttxt{
float: left;
}
.righttxt dd{
height: 30px;
margin: 0 5px 5px 5px;
background-color: #ddd;

}
</style>
</head>
<body>

<div id="con">
<div class="line">
<div class="leftimg">
图片
</div>
<div class="righttxt">
<dd>右边边第一行</dd>
<dd>右边第二行</dd>
</div>
</div>
</div>
</body>
</html>

从设计图到网页的实现，主要是思考怎么分块。只要弄清楚了怎么分块，就跟搭积木一样，组合起来就是了。

希望我的答案能帮到你。

热心网友时间：2024-02-27 20:48

首先把 dl当做盒子 dt dd相当于盒子里的子盒子，dt float:left ;dd float:right(盒子要有宽高百分比就好)追问dt{width:40px;}
dd{width:130px;float:left;height:15px}
a{text-decoration:none;float:right;}

改了还是浮不上去
感觉像是图片独占了一行不知道怎么取消