连续 4 张图像，共 3 行

Question

我无法在 3 行中连续获取 4 张图片。标题应位于图像的正下方。在我添加标题之前，我最初让它工作。现在我无法让页面正常运行。下面是我的代码。这里有一个 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

如果您只需要一个 4x3 的静态结构，一种方法是封装三个 div 四个 zipcodebox 并在那些 display:flex 的样式中添加一个 display:flex =10=].

然后你可以做任何你想做的事，你会保持给定的布局。

非常快速和简单的解决方案，但它有效。

Answer 2

divs 是 block 元素，这意味着它们想要填充其父级的宽度，您需要更改它以获得所需的结果。

.zipcodebox { display:inline-block }

会给你你所需要的。另外，注意你的属性； style="zipcodebox" 与 class="zipcodebox" 不同。

连续 4 张图像，共 3 行

4 images in a row with 3 rows total

html