Question

我无法连续拍摄3行图像。标题应位于图像正下方。我最初工作，直到我添加标题。现在我无法让页面表现得很好。以下是我的代码。这是一个用于查看此代码的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

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

.zipcodebox { display:inline-block }

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

Answer 2

如果你只需要一个4x3的静态结构，可以用一种方法填充div中的zipcodebox个display:flex四个div并添加foo的样式{{1} }}

然后你可以做你想要的视线，你将保留给定的布局。

相当快速而简单的解决方案，但它确实有效。

连续4个图像，总共3行

2 个答案: