Home > Article > Web Front-end > 【HTML中怎样在图片的右边显示文字，不用表格】_html/css_WEB-ITnose
【HTML中怎样在图片的右边显示文字，不用表格】_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:31:213796browse
回复讨论(解决方案)
示例，其实就是布局的问题
<!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> 示例，其实就是布局的问题
<!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> 大神请受我一拜，虽然很多看不懂，才刚学几天。谢谢
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：求一种表格的设计方法_html/css_WEB-ITnoseNext article：为什么这里返回的函数值为underfined?_html/css_WEB-ITnose