【HTML中怎样在图片的右边显示文字，不用表格】_html/css

Inhaltsverzeichnis

回复讨论(解决方案)

Heim

Web-Frontend

HTML-Tutorial

【HTML中怎样在图片的右边显示文字，不用表格】_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:31 AM

回复讨论(解决方案)

示例，其实就是布局的问题

<!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="/static/imghw/default1.png"  data-src="http://img.baidu.com/img/image/3bf33a87e950352a5947ae485143fbf2b2.jpg"  class="lazy"   alt="" />    </div>    <ul class="list">    	<li><span>姓名:</span>测试</li>        <li><span>性别:</span>男</li>        <li><span>描述：</span><p>测试测试测试测试测试才愁死额</p></li>    </ul></div></body></html>

Nach dem Login kopieren

示例，其实就是布局的问题

<!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="/static/imghw/default1.png"  data-src="http://img.baidu.com/img/image/3bf33a87e950352a5947ae485143fbf2b2.jpg"  class="lazy"   alt="" />    </div>    <ul class="list">    	<li><span>姓名:</span>测试</li>        <li><span>性别:</span>男</li>        <li><span>描述：</span><p>测试测试测试测试测试才愁死额</p></li>    </ul></div></body></html>

Nach dem Login kopieren

大神请受我一拜，虽然很多看不懂，才刚学几天。谢谢

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn