Tag Archives: CSS

CSS盒子模型纠错

自己的一个WP网站,用的是一个国外的Themem,显示的时候有些问题,具体情况描述如下:

begin

有时候标题会把图片给挤过去了,并且影响了整个页面的排列,很不美观。HTML的结构如下

[cc lang=”html”]

recent from category one

How to Introduce Dog

Many dog owners seem to forget the basic rule whilst proudly showing off their new acquisition , to their family and friends. They bypass the correct introduction sequence, which is both basic, simple and logical. We should always place ourselves in our dog’s position, and ask ourselves a few questions…

[/php]

第一次修改:治标不治本

我发现一个奇怪的现象,如果标题的长度如果比较长的话,就不会出现这样的效果。比如 我在firebug里面把标题的内容人为加长

test1

看来是title-boxes的长度属性没有固定 如果标题太短的话不足以支撑起html的结构,那好就给它固定一个width属性:
[cc lang=”css”]width:100%;[/php]

如果图片层不知道换行的话,就让标题占满100%的位置,强迫图片层换行.这样OK了,但是原因还没有找到。是不是Theme的设计有缺陷?

第二次修改:查找CSS模型

重要的是[cc lang=”html”][/php]这个span。css属性中“display”是“block”的,我的理解,按照css盒模型,如果该div的display如果是block的话,这一个div就是一个”块”,即使是前面有空余空间 也要另起一行.所以,如果给图片所出得div加上display为block的属性的话,图片是否就会自动换行?很遗憾,及时给图片所在的层加上block属性,位置也么有任何变化.经过无数次测试,我的结论是:如果想让某个div自动换行,出入你把他挤到下一行去,它是不会自动去下一行的.