Question

我需要的是每行只有4个盒子，总共3行。现在它显示5,5,2。我有它正常工作，但在添加一些代码后，我做了一些事情搞砸了。任何帮助，将不胜感激。

这是一个链接，可以看到我当前显示的代码。 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>

Answer 1

由于此属性设置为zipcodebox类：“display：inline-block;”

一行中的div数量将根据屏幕分辨率和大小而变化。

如果你想在每一行中有固定数量的div，那么：

然后你需要以百分比定义zipcodebox的宽度：例如：宽度：20％

PS：它没有响应。

Answer 2

我通过简单地将.container {max-width：95％;}添加到css并将容器div添加到html来修复此问题。它的工作原理和反应灵敏。

只想连续显示4个div而不是5个

2 个答案: