HTML里的 dl dt dd dd里的文字怎么浮到图片的右边中间怎么浮上去
html的代码:<html><head><title>div</title><linkrel="stylesheet"href="css5.css"type="text/...
html的代码:
<html>
<head>
<title>div</title>
<link rel="stylesheet" href="css5.css" type="text/css">
</head>
<body> <div class="container">
<div class="container1">
<dl>
<dt class="a"></dt>
<img src="show1.jpg" width="80" height="60" display=inline>
<dd><a href="#">大牌狂降价，三折直送</a></dd>
<dt class="b"></dt>
<img src="show2.jpg" width="80" height="60">
<dd><a href="#">大学要求老师开网店</a></dd>
<dt class="c"></dt>
<img src="show4.jpg" width="80" height="70">
<dd><a href="#">黑眼圈推荐，美白不停</a></dd>
<dt class="d"></dt>
<img src="show5.jpg" width="80" height="60">
<dd><a href="#">瘦身狂潮风，修形之选</a></dd>
</dl>
</div>
</div>
</body>
</html>
css的代码：
body{font-size:5px;}
.container{background-image:url(bg.gif);background-
repeat:no-repeat;
width:270px;height:300px;background-position:0px
0px;position:absolute}
.container1{width:220px;height:250px;margin-
top:32px;padding-left:3px}
a{text-decoration:none;float:right;}
a:hover{color:red;}
感觉图片好像自己独占了一行 文字浮不上去 我想让文字浮在图片的右边与图片对齐
不知道该怎么做？ 展开
<html>
<head>
<title>div</title>
<link rel="stylesheet" href="css5.css" type="text/css">
</head>
<body> <div class="container">
<div class="container1">
<dl>
<dt class="a"></dt>
<img src="show1.jpg" width="80" height="60" display=inline>
<dd><a href="#">大牌狂降价，三折直送</a></dd>
<dt class="b"></dt>
<img src="show2.jpg" width="80" height="60">
<dd><a href="#">大学要求老师开网店</a></dd>
<dt class="c"></dt>
<img src="show4.jpg" width="80" height="70">
<dd><a href="#">黑眼圈推荐，美白不停</a></dd>
<dt class="d"></dt>
<img src="show5.jpg" width="80" height="60">
<dd><a href="#">瘦身狂潮风，修形之选</a></dd>
</dl>
</div>
</div>
</body>
</html>
css的代码：
body{font-size:5px;}
.container{background-image:url(bg.gif);background-
repeat:no-repeat;
width:270px;height:300px;background-position:0px
0px;position:absolute}
.container1{width:220px;height:250px;margin-
top:32px;padding-left:3px}
a{text-decoration:none;float:right;}
a:hover{color:red;}
感觉图片好像自己独占了一行 文字浮不上去 我想让文字浮在图片的右边与图片对齐
不知道该怎么做？ 展开
2个回答
展开全部
我看了一下你的代码，你想要的效果跟你的代码对不上的。
你可以这么分解： 一个图片+文字说明是一行
这一行里分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>
从设计图到网页的实现，主要是思考怎么分块。只要弄清楚了怎么分块，就跟搭积木一样，组合起来就是了。
希望我的答案能帮到你。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
首先把 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;}
改了还是浮不上去
感觉像是图片独占了一行 不知道怎么取消
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
