使用css和html創建內容網格佈局困難

Question

我想創建一個使用標籤和CSS的網格佈局。我需要網格系統來保存下面圖片中描繪的四個主要區塊。我創建了一個在safari和chrome中很好用的解決方案，但是在firefox中與標題重疊的方式不太好。

請參閱下面的代碼，也許有人可以看到我出錯的地方！我不能爲我的生活找到問題。

HTML代碼： -

<div class="elements_wrapper"> 

     <div id="element1"> 
      <img class="align-image" src="img/image1"/>           
       <span class="element-title">Title</span> 
        <p class="element-explain">Main text goes here</p> 
     </div> 

     <div id="element2"> 
      <img class="align-image" src="img/image2"/>           
       <span class="element-title">Title</span> 
        <p class="element-explain">Main text goes here</p> 
     </div> 

     <div id="element3"> 
      <img class="align-image" src="img/image3"/>           
       <span class="element-title">Title</span> 
        <p class="element-explain">Main text goes here</p> 
     </div> 

     <div id="element4"> 
      <img class="align-image" src="img/image4"/>           
       <span class="element-title">Title</span> 
        <p class="element-explain">Main text goes here</p> 
     </div>           
    </div> 

CSS代碼： -

.elements_wrapper { 
    width:100%; 
    margin-left:-65px; 
    margin-top:110px; 
    padding-bottom:30px; 
} 


#element1{ 
    position:absolute; 
    display:inline-block; 
    margin-left:30px; 
    padding-bottom:20px; 

} 


#element2 { 
    position:absolute; 
    display:inline-block; 
    margin-top:200px; 
    margin-left:30px; 
    padding-bottom:20px; 
} 


#element3 { 
    position:absolute; 
    display:inline-block; 
    margin-left:545px; 
    margin-top:200px; 
    padding-bottom:20px; 

} 


#element4 { 
    position:absolute; 
    display:inline-block; 
    margin-left:545px; 
    padding-bottom:20px; 
} 

.element-title { 
    font-family:helvetica, arial, serif; 
    color:black; 
    display:inline; 
    font-size:14pt; 
    font-weight:bold; 
    padding-top:15px; 
} 

.element-explain { 
    font-family:helvetica, arial, serif; 
    font-size:10pt; 
    float:left; 
    width:280px; 
} 


.align-image { 
    border: none; 
    float:left; 
    padding-right:15px; 
} 

我的代碼在Safari和Chrome的偉大工程，但不是很好，在Firefox，請幫助。另外，如果我已經使用的代碼很差或需要更改以確保跨瀏覽器兼容性，請告訴我。非常感謝。

Answer 1

見下面的例子：http://jsfiddle.net/ZNSAX/2/

Answer 2

.element-explain { 
    font-family:helvetica, arial, serif; 
    font-size:10pt; 
    float:left; 
    width:280px; 
} 

浮在這裏會造成這個錯誤。 Firefox比Chrome和IE瀏覽器對浮動元素有點挑剔。刪除此應該可以解決您的問題。