4の画像は、私は3列と行の4つの画像を取得する問題を抱えてい

Question

合計します。タイトルは画像のすぐ下にあるはずです。私はタイトルを追加するまで元々働いていた。今、私はページを正しく動作させることができません。以下は私のコードです。このコードを実際に見るためのURLは次のとおりです。 http://bakersfieldtopagents.com/zipcode-search/。画像は、一方を他方の上に表示し続けます。

<style> 
.zipcodeboximage img {height:100%; width:100%; max-height:200px; max-width:300px; padding-right:10px; padding-left:10px; display:inline-block;} 
.zipcodeboxtitle {background-color:#0F0A42; color:#FFFFFF; line-height: 1; font-size: 1.6em; text-align:center; font-family: sans-serif; max-width:280px; width:100%; margin-top:0px; margin-left:10px; padding:10px;} 
</style> 

<div style="zipcodebox"> 
    <div class="zipcodeboximage"><img src="image" alt="zipcode"></div> 
    <div class="zipcodeboxtitle">AREA TITLE</div> 
</div> 
<div class="zipcodebox"> 
    <div class="zipcodeboximage"><img src="image" alt="zipcode"></div> 
    <div class="zipcodeboxtitle">AREA TITLE</div> 
</div> 
<div class="zipcodebox"> 
    <div class="zipcodeboximage"><img src="image" alt="zipcode"></div> 
    <div class="zipcodeboxtitle">AREA TITLE</div> 
</div> 
<div class="zipcodebox"> 
    <div class="zipcodeboximage"><img src="image" alt="zipcode"></div> 
    <div class="zipcodeboxtitle">AREA TITLE</div> 
</div> 
<div class="zipcodebox"> 
    <div class="zipcodeboximage"><img src="image" alt="zipcode"></div> 
    <div class="zipcodeboxtitle">AREA TITLE</div> 
</div> 
<div class="zipcodebox"> 
    <div class="zipcodeboximage"><img src="image" alt="zipcode"></div> 
    <div class="zipcodeboxtitle">AREA TITLE</div> 
</div> 
<div class="zipcodebox"> 
    <div class="zipcodeboximage"><img src="image" alt="zipcode"></div> 
    <div class="zipcodeboxtitle">AREA TITLE</div> 
</div> 
<div class="zipcodebox"> 
    <div class="zipcodeboximage"><img src="image" alt="zipcode"></div> 
    <div class="zipcodeboxtitle">AREA TITLE</div> 
</div> 
<div class="zipcodebox"> 
    <div class="zipcodeboximage"><img src="image" alt="zipcode"></div> 
    <div class="zipcodeboxtitle">AREA TITLE</div> 
</div> 
<div class="zipcodebox"> 
    <div class="zipcodeboximage"><img src="image" alt="zipcode"></div> 
    <div class="zipcodeboxtitle">AREA TITLE</div> 
</div> 
<div class="zipcodebox"> 
    <div class="zipcodeboximage"><img src="image" alt="zipcode"></div> 
    <div class="zipcodeboxtitle">AREA TITLE</div> 
</div> 
<div class="zipcodebox"> 
    <div class="zipcodeboximage"><img src="image" alt="zipcode"></div> 
    <div class="zipcodeboxtitle">AREA TITLE</div> 
</div> 

Answer 1

divsはblock要素です。これは、親の幅を埋めることを意味します。希望の結果を得るには、それを変更する必要があります。

.zipcodebox { display:inline-block } 

必要なものを提供します。また、あなたの属性にも注意してください。 style="zipcodebox"はclass="zipcodebox"と同じではありません。

Answer 2

あなただけの4×3の静的な構造が必要な場合は、一つの方法は、あなたのzipcodeboxの3 div 4にincapsulateおよびそれらdivのスタイルにdisplay:flexを追加することができます。あなたが欲しいwatheverあなたが行うことができます

その後、あなたは、与えられたレイアウトをしておこう。

非常に高速かつ簡単な解決策が、それは動作します。