Question

用DIV+CSS布局中,如何设置图片与文字在同一高度?高手请进..

我最近在用DIV+CSS布局写百度知道这个页面进行练习,但是在写"待解决的问题"这一栏的时候,不知如何将那个小图片和文字设置在同一高度?
还有就是下面的列表,我用ul写,在DW设计里面看,前面是个小方点,而导出的页面中却是个稍大的圆点,不知道为什么?
下面的精彩词条中,如何将图片浮动到右对齐,并让文字环绕图片?
右边一列有很多小图标后面放文字,这又该怎么写呢?是用ul还是table呢?
最后还有一个问题,在这种布局方式中,什么时候才用表格呢,我以前一直以为用DIV布局就不会用table了,但还是会用到,请各位帮我总结下用table的情况,谢谢了....
可能我的问题用点多,但是这都是我急切想知道的,我试了很久,但还是没能解决,主要因为我太菜了吧.求高手多多指点啦...

Answer 1

问题一:(在写"待解决的问题"这一栏的时候,不知如何将那个小图片和文字设置在同一高度?)
你是说问号那个小图片和文字么;它是用背景图片定位来做的;并且像
页面右边的这种效果也是这种做法;他们有统一的样式写法如下
.ibbs, .igood, .iok, .ivote, .iwhy, .istar {
background:transparent url(https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/iknow/icons.gif) no-repeat scroll 0 0;
float:left;
height:16px;
margin-right:2px;
overflow:hidden;
width:16px;
}
(你看懂这个代码就知道怎么做的了;)

问题二:(用ul写,在DW设计里面看,前面是个小方点,而导出的页面中却是个稍大的圆点,不知道为什么?)
因为各个浏览器对样式的默认解析是不同的,所以在不同浏览器中看它的默认li圆点不同(DW设计视图你也当成一种浏览器);像这些默认不同的样式我们一般不用;li的前面的小圆点你可以用背景来做;做法和问题一的方法还比较相似;

问题三(下面的精彩词条中,如何将图片浮动到右对齐,并让文字环绕图片?)
图片和文字是在一个div标签里,很明显给图片一个右浮动就可以了;里面的文字放在<img>下面;可以放在p标签里(不能放在块类标签里如div,table..);

问题四(什么时候才用表格呢,)
其实呢div也是可以完成table的效果的;但会麻烦些;如果你喜欢那么你可以都用div打造;一般来说很明显的表格样子我们会用一下表格(如,什么调查表格啊之类的);用的地方不多,百度知道这个页面是没有可以用表格的地方的;

看不明白的地方可以hi我一下.

Answer 2

把那个放图片和文字的层css设置为比如id叫#aa
#aa {height: 30px; line-height:30px; vertical-align: middle;}
这样就可以使里面的东西在层里垂直居中了。一定要设置相同高度和间距。

Answer 3

用div就不用写table，全部都是div。

ul有点，这个可以定义ul{display:inline;list-style-type:none}

Answer 4

把图片加上align="absmiddle"

<img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif" align="absmiddle" />