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

最新推荐文章于 2024-07-01 18:40:50 发布

findsafety

最新推荐文章于 2024-07-01 18:40:50 发布

阅读量5.4w

点赞数 9

本文提供了一个使用HTML和CSS进行网页布局的具体示例，展示了如何利用这两种语言实现图片与文字的结合展示，包括基本的样式设置和页面元素排列。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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><p>测试测试测试测试测试才愁死额</p></li>

    </ul>

</div>

</body>

</html>