4



我正在尝试使用标签和 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 中效果不佳，请帮忙。另外，如果我已经使用的代码不好或需要更改以确保跨浏览器兼容性，请告诉我。非常感谢。

4

2 回答 2

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

在此处浮动会导致此错误。与 Chrome 和 IE 相比，Firefox 对浮动元素有点挑剔。删除它应该可以解决您的问题。

于 2012-09-03T21:00:45.737 回答
0

请参阅下一个示例：http: //jsfiddle.net/ZNSAX/2/

于 2012-09-03T21:05:58.290 回答