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

html-css017

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在同一行显示有多种方法,可以用设置浮动——用float,还可以用绝对定位position,等等。

这里只简单介绍使用浮动实现方法。

方法一:

<div style="float:left"></div><div></div>

方法二:

<div style="float:left"></div><div style="float:left"></div>

方法三:

<div style="float:left"></div><div style="float:right"></div>

这三种方法均可实现div同行显示。

基础的知识要掌握扎实了,像这样的可以这样写:

<div class="caihuabox">

<div class="fl">吃菜花</div>

<div class="fr">要多嚼几口</div>

</div>

css样式:

.caihuabox{

width:200px

margin:0 auto

overflow: hidden

background-color: #ccc

}

.fl{

float:left

background-color: #0f0

}

.fr{

float:right

background-color: #f00

}