連續4行共3行

Question

我在連續3行中遇到了4個圖像有問題。標題應該直接位於圖像下方。直到我添加標題後，我纔開始工作。現在我無法讓頁面的行爲正確。以下是我的代碼。以下是查看此代碼的網址。 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

div s是block元素，這意味着他們想要填充其父項的寬度，您需要更改以獲得所需的結果。

.zipcodebox { display:inline-block } 

會給你你需要的東西。另外，要注意你的屬性; style="zipcodebox"與class="zipcodebox"不一樣。

Answer 2

如果你只需要4×3的靜態結構，一種方式可以有三種div Four的zipcodebox來incapsulate並添加display:flex那些div的風格。

然後你可以做你想要的，你會保持給定的佈局。

相當快速和簡單的解決方案，但它的工作原理。