css怎么设置图片和文字在同一行

html-css010

css怎么设置图片和文字在同一行,第1张

<style type="text/css">

.main{width: 80%margin: 0 autoheight: 100px}

.img{width: 40%float: left}

.img img{height: 100pxmax-width: 100%}

.main p{width: 60%float: leftword-break: break-allline-height: 100px}

</style>

<div class="main">

<div class="img">

<img src="img/xxx.jpg" >

</div>

<p>你的文字</p>

</div>

至于p标签的行高你可以随意调,不懂可以追问或私我

<!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>css如何使图片和文字在同一行显示,文字换行后和图片对齐</title>

<style>

div { width:400px margin:0 auto}

img { float:left margin:0 10px 10px 0}

p { width:auto}

</style>

</head>

<body>

<div>

<img src="img.jpg" width="200" />

<p>css如何使图片和文字在同一行显示,文字换行后和图片对齐css如何使图片和文字在同一行显示,文字换行后和图片对齐css如何使图片和文字在同一行显示,文字换行后和图片对齐css如何使图片和文字在同一行显示,文字换行后和图片对齐css如何使图片和文字在同一行显示,文字换行后和图片对齐css如何使图片和文字在同一行显示,文字换行后和图片对齐css如何使图片和文字在同一行显示,文字换行后和图片对齐css如何使图片和文字在同一行显示,文字换行后和图片对齐css如何使图片和文字在同一行显示,文字换行后和图片对齐css如何使图片和文字在同一行显示,文字换行后和图片对齐css如何使图片和文字在同一行显示,文字换行后和图片对齐css如何使图片和文字在同一行显示,文字换行后和图片对齐css如何使图片和文字在同一行显示,文字换行后和图片对齐css如何使图片和文字在同一行显示,文字换行后和图片对齐css如何使图片和文字在同一行显示,文字换行后和图片对齐css如何使图片和文字在同一行显示,文字换行后和图片对齐css如何使图片和文字在同一行显示,文字换行后和图片对齐</p>

</div>

</body>

</html>

效果图是这样的。注意:img要有“float:left”或“float:right”;p一定要设置“width:auto”