.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
}