php echo html - 左边距不起作用

Question

好吧，在一个 .php 文件中，我为每个结果（来自搜索输入）回显一些 html（如模板）：

while ($row = mysqli_fetch_array($result))
{
  //image
  echo "<img id=" . '"' . "myImg" . '"' . "src=" . '"' . "showImage.php?image=" . $row['shortcutImage'] . '"' . "class=" . '"' . "imageList" .'"' . ">";
  //title
  echo "<h5 class=" . '"' ."titleResult" . '"' . ">".  $row['name_now'] . "</h5>";
  //area
  echo "<p class=" . '"'. "areaResult" . '"' . ">" . "Περιοχή: " . $row['area'] . "</p>";

  //break between results
  echo "<br>";
  echo "<br>";
}

风格

• imageList 用于图片
• titleResult 用于<h5>
• areaResult 为<p>

.imageList{ 边距顶部：10px； 明确：两者； 宽度：100%； 最大宽度：250px； 向左飘浮; } .titleResult{ 颜色：RGB（17、17、17）； 字体粗细：500； 左边距：35px； 边距顶部：20px； } .areaResult{ 边距顶部：35px； }

当然还有我的输出：（图像名称和区域是测试）

Answer 1

您为h5 元素指定的margin-left 不是取自图像的右边缘，而是取自视口的边缘（或这些元素所在的任何元素）。如果您希望边距来自图像的边缘，则必须将250px 的图像宽度添加到它。发生这种情况是因为您已将 img 设为浮动元素。

将每组图像、标题和区域文本放在div 中是明智的，这样您就可以从该上下文中进行边距测量。这样，您还可以摆脱用于垂直间距的 br 元素，而改用 CSS。

例如，你可以这样做：

<div style="padding-left:280px; padding-bottom: 40px">
  <img src="..." style="float:left">
  <h5>Title</h5>
  <p>Area</p>
</div>