css里 在一个标签中如何使文字和左边图片对齐成顶部对齐,怎么布局啊?

html-css06

css里 在一个标签中如何使文字和左边图片对齐成顶部对齐,怎么布局啊?,第1张

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:img{float:left}。

3、浏览器运行index.html页面,此时div标签中的左侧图片与右侧图片通过css调整为了浮动而顶部对齐了。

方法一:

.a, .b {

   display: inline-block

   width: 50%

   border: 0

   vertical-align:top  /*靠上对齐*/

}

方法二:

.a, .b {

   float: left

   width: 50%

   border: 0

}

.parent:after {   /*清除浮动*/

   content: ''

   display: block

   clear: both

}

方法一看起来简单,但一般不建议使用行内块级元素(inline-block),容易出现一些让人摸不着头脑的错位问题。个人建议使用方法二。