タグとCSSを使用してグリッドレイアウトを作成しようとしています。下の画像に示されているように、4つのメインブロックを保持するグリッドシステムが必要です。私はサファリとクロームでうまく機能するソリューションを作成しましたが、タイトルが重複しているため、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;
}
私のコードはサファリとクロームではうまく機能しますが、Firefoxではそれほどうまく機能しません。助けてください。また、すでに使用しているコードが不良であるか、ブラウザ間の互換性を確保するために変更する必要があるかどうかをお知らせください。本当にありがとう。