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

html-css015

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标签的行高你可以随意调，不懂可以追问或私我

<div

style="

background-image:url(您的图片位置)">

<div>这里添加logo

（用css控制就可以了）</div>

<div>这里可以添加文字了！如果需要的话可以吧文字放在一个容器里，并用css控制它的位置。</div>

</div>

这个我调试过了

在所有浏览器上都没有问题的！

<!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”