时间戳

首页 > 解决方案 > php echo html - 左边距不起作用

php - php echo html - 左边距不起作用

问题描述

好吧，在一个 .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{
            边距顶部：10px；
            明确：两者；
            宽度：100%；
            最大宽度：250px；
            向左飘浮;
        }
        .titleResult{
            颜色：RGB（17、17、17）；
            字体粗细：500；
            左边距：35px；
            边距顶部：20px；
        }
        .areaResult{
            边距顶部：35px；
        }

当然还有我的输出：（图像名称和区域是测试） 在此处输入图像描述

标签： phphtmlcss

解决方案

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>

推荐阅读