PHP的回声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> for areaResult

    .imageList{
            margin-top: 10px;
            clear: both;
            width:100%;
            max-width:250px;
            float: left;
        }
        .titleResult{
            color: rgb(17, 17, 17);
            font-weight: 500;
            margin-left: 35px;
            margin-top: 20px;
        }
        .areaResult{
            margin-top: 35px;
        }

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

Answer 1

您为margin-left元素指定的h5不是从图像的右边缘，而是从视口（或这些元素所在的任何元素）的边缘。如果您希望页边距位于图像边缘，则必须向其添加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>