今天就遇到了這么一個效果，代碼原理比較簡單就是圖片float:left;，但是如果在做一個比較復雜的模板時，有可能遇到很多問題，使標題文字不能和圖片對齊。

今天遇到一個問題，錯誤效果如下

正確顯示應為：

因為我看過代碼，圖片float: left; 文字為正常格式。沒有任何問題。

這里代碼涉及到 html 和 css 多個元素的定義，比較復雜，就不貼出代碼了。

首先，我們要判斷一下問題，右擊需要查看的部分 (我使用的是 Chrome 瀏覽器) ，點擊 "審查元素" 。

或者我們可以再CS4中看一下

這個地方藍色的邊框就是

的 padding ，那么上下的應該就是 margin 了，我們只要把 h3 的 padding 和 margin 設為0，就靠譜了。

設置完成后如下圖

達到我們想要的效果了，關鍵是去邊框。

如果在設計模板的時候出現文字就是對不齊了，就需要去看看他哪里出現空白，或者可以消除空白來達到對齊的效果。

也可以再css中加入如下代碼解決

復制代碼代碼如下:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, img, ol, ul,p{

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

background: transparent;

}

搞了好久的問題。

原文：http://www.jb51.net/css/34214.html

總結

以上是生活随笔為你收集整理的css中两行图片整齐排布,css 标题一行图片 两行文字的排列方法以及相关问题处理...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。