HTML中怎样在图片的右边显示文字代码,Css代码库,德仔网

代码语言

代码分类

【Css】 HTML中怎样在图片的右边显示文字

作者: / 发布于2018/11/13/ 798

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

ul,p{margin:0;padding:0;}

li{list-style:none;}

.box{width:500px;margin:100px auto;}

.box .img{float:left;}

.box .img img{width:100px;height:100px;}

.box .list{float:left;width:200px;margin-left:20px;display:inline;}

.box .list li{line-height:24px;font-size:14px;}

.list li span{font-weight:bold;}

</style>

</head>

 

<body>

<div class="box">

    <div class="img">

        <img src="http://img.baidu.com/img/image/3bf33a87e950352a5947ae485143fbf2b2.jpg" alt="" />

    </div>

    <ul class="list">

        <li><span>姓名:</span>测试</li>

        <li><span>性别:</span>男</li>

        <li><span>描述：</span>测试测试测试测试测试才愁死额</li>

    </ul>

</div>

</body>

</html>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

同语言下

可能有用的

贡献的其它代码Label