网页设计中,怎么用CSS让不同行的字显示在一行,例如图所示,上面怎么变成下面这种?

html-css017

网页设计中,怎么用CSS让不同行的字显示在一行,例如图所示,上面怎么变成下面这种?,第1张

可以通过浮动来设置,让不同行的两行一个左浮动,一个右浮动,这样,它们就显示在一行了。

还有一种方法是所有元素都左浮动,然后指定宽度,让宽度正好是两列的值,那么到两行的时候,它会自动折行。

通过决定定位,分别对没一行文字进行绝对定位,因为是绝对定位,所以可以指定它们到任意位置。position:absolute可以解决这个问题。

如果打开的样式表只有一行代码,那说明样式表不全!

二如果打开的样式表所有的代码都显示在一起没有换行的吧可以用DW 里免的一个功能将代码格式化一下就行了!具体的请看下图

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