只想連續顯示4個div而不是5個

我需要的是每行只有4個盒子，總共3行。現在它顯示5,5,2。我讓它工作正常，但添加了一些代碼後，我做了一些事情搞砸了。任何幫助，將不勝感激。只想連續顯示4個div而不是5個

這是一個鏈接，查看我當前顯示的代碼。 http://bakersfieldtopagents.com/zipcode-search/。

<style> 
.title {font-size:40px; text-align:center;} 
.zipcodebox { display:inline-block; vertical-align:top;} 
.zipcodeboxxtra { display:inline; z-index:1; position:relative; margin-top:-20px; float:right; margin-right:107px; vertical-align:top;} 
.zipcode {color:#FFFFFF; font-size:60px; z-index:2; position: absolute; margin-left:80px; margin-top:55px;  
-ms-transform: rotate(25deg); /* IE 9 */ 
-webkit-transform: rotate(25deg); /* Chrome, Safari, Opera */ 
transform: rotate(25deg);} 
.zipcodeother {color:#FFFFFF; font-size:60px; z-index:2; position: absolute; margin-left:30px; margin-top:55px;  
-ms-transform: rotate(25deg); /* IE 9 */ 
-webkit-transform: rotate(25deg); /* Chrome, Safari, Opera */ 
transform: rotate(25deg);} 
.zipcodeboximage img {height:100%; width:100%; max-height:200px; max-width:300px; padding-right:10px; padding-left:10px; z-index:1; position: relative;} 
.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:0px; padding:10px;} 
.zipcodeboxtitle a {color:#FFFFFF;} 
.zipcodeboxtitlextra1 a {background-color:#0F0A42; color:#FFFFFF; line-height: 1; font-size: 1.6em; text-align:center; font-family: sans-serif; width:280px; padding:10px; display:block; border-bottom: 1px solid #000000;} 
.zipcodeboxtitlextra2 a {background-color:#0F0A42; color:#FFFFFF; line-height: 1; font-size: 1.6em; text-align:center; font-family: sans-serif; width:280px; padding:10px; display:block; border-bottom: 1px solid #000000;} 
.zipcodeboxtitlextra3 a {background-color:#0F0A42; color:#FFFFFF; line-height: 1; font-size: 1.6em; text-align:center; font-family: sans-serif; width:280px; padding:10px; display:block; border-bottom: 1px solid #000000;} 
.zipcodeboxtitlextra4 a {background-color:#0F0A42; color:#FFFFFF; line-height: 1; font-size: 1.6em; text-align:center; font-family: sans-serif; width:280px; padding:10px; display:block;} 
</style> 

<div class="title">Search Homes By Zipcode</div> 
<center> 

<div class="zipcodebox"> 
    <div class="zipcode">93312</div> 
    <div class="zipcodeboximage"><a href=""><img src="" alt="zipcode"></a></div> 
<div class="zipcodeboxtitle"><a href="">AREA TITLE</div> 
</div> 
<div class="zipcodebox"> 
<div class="zipcode">93314</div> 
    <div class="zipcodeboximage"><a href=""><img src="" alt="zipcode"></a></div> 
    <div class="zipcodeboxtitle"><a href="">AREA TITLE</div> 
</div> 
<div class="zipcodebox"> 
    <div class="zipcode">93311</div> 
    <div class="zipcodeboximage"><a href=""><img src="" alt="zipcode"></a></div> 
    <div class="zipcodeboxtitle"><a href="">AREA TITLE</div> 
</div> 
<div class="zipcodebox"> 
    <div class="zipcode">93313</div> 
    <div class="zipcodeboximage"><a href=""><img src="" alt="zipcode"></div> 
    <div class="zipcodeboxtitle"><a href="">AREA TITLE</div> 
</div> 
<div class="zipcodebox"> 
    <div class="zipcode">93309</div> 
    <div class="zipcodeboximage"><a href=""><img src="" alt="zipcode"></a></div> 
    <div class="zipcodeboxtitle"><a href="">AREA TITLE</div> 
</div> 
<div class="zipcodebox"> 
    <div class="zipcode">93301</div> 
    <div class="zipcodeboximage"><a href=""><img src=""></a></div> 
    <div class="zipcodeboxtitle"><a href="">AREA TITLE</div> 
</div> 
<div class="zipcodebox"> 
    <div class="zipcode">93304</div> 
    <div class="zipcodeboximage"><a href=""><img src="" alt="zipcode"></a></div> 
    <div class="zipcodeboxtitle"><a href="">AREA TITLE</div> 
</div> 
<div class="zipcodebox"> 
    <div class="zipcode">93308</div> 
    <div class="zipcodeboximage"><a href=""><img src="" alt="zipcode"></a></div> 
    <div class="zipcodeboxtitle"><a href="">AREA TITLE</div> 
</div> 
<div class="zipcodebox"> 
    <div class="zipcode">93306</div> 
    <div class="zipcodeboximage"><a href=""><img src="http://bakersfieldtopagents.com/wp-content/uploads/2016/08/cityimage.jpg" alt="zipcode"></a></div> 
    <div class="zipcodeboxtitle"><a href="">AREA TITLE</div> 
</div> 
<div class="zipcodebox"> 
    <div class="zipcode">93305</div> 
    <div class="zipcodeboximage"><a href=""><img src="" alt="zipcode"></a></div> 
    <div class="zipcodeboxtitle"><a href="">AREA TITLE</div> 
</div> 
<div class="zipcodebox"> 
    <div class="zipcode">93307</div> 
    <div class="zipcodeboximage"><a href=""><img src="" alt="zipcode"></a></div> 
    <div class="zipcodeboxtitle"><a href="">AREA TITLE</a></div> 
</div> 
<div class="zipcodebox"> 
    <div class="zipcodeother">Other Areas</div> 
    <div class="zipcodeboximage"><a href=""><img src="" alt="zipcode"></a></div> 
    <div class="zipcodeboxtitlextra1"><a href="">AREA TITLE</a></div> 
    <div class="zipcodeboxtitlextra2"><a href="">AREA TITLE</a></div> 
    <div class="zipcodeboxtitlextra3"><a href="">AREA TITLE</a></div> 
    <div class="zipcodeboxtitlextra4"><a href="">AREA TITLE</a></div> 
</div> 
<div class="title">Search Homes By Zipcode</div> 
</center>

來源

2016-08-14 Dom

由於此屬性設置爲zipcodebox類：「display：inline-block;」

連續的div數量將根據屏幕分辨率和大小而變化。

如果你想有每一行的div的固定號碼，然後做：

然後，你需要在百分比來定義zipcodebox的寬度：如：寬度：20％

PS：不會做出迴應。

來源

2016-08-14 21:05:00

我通過簡單地將.container {max-width：95％;}添加到CSS並將一個容器div添加到html來解決此問題。它的工作原理和響應速度。

來源

2016-08-14 21:37:15 Dom

只想連續顯示4個div而不是5個

回答

相關問題