Question

我正在使用php脚本来读取目录并将所有图像加载到一个库中，在<div id="content">标记内我有一个函数<?php create_gallery("path"); ?>来加载所有图像。

问题是在此之后<div>的高度没有改变，即使身体高度正确并且所有图像都显示出来，div也没有显示出来。如果它是一个透明的div，那就不会有问题，但它的背景只有83px，从第一个跨度来看，div的高度应该是1000左右的px高度，图像的高度相同起来。

php函数：

  function create_gallery($path){
    $things = scandir($path);
    echo "<span><h1>Artwork Test</h1></span>";
    $imgs = img_arr($path); //only returns images
    for ($i=0; $i<count($imgs); $i++) {
      echo "<div class='art_img_div' onclick='gallery_open_full(this)'><img class='art_img_img' src=" . $imgs[$i] . " /><div class='art_img_div_div'></div></div>";
    }
  }

的CSS：

#content {
  width: 75%;
  margin: 0px auto;
  padding-bottom: 3px;
  border-left: 1px groove rgba(0, 0, 0, 0.25);
  border-right: 1px groove rgba(0, 0, 0, 0.25);
  box-shadow: 2px 0px 2px 4px rgba(0, 0, 0, 0.125);
  padding: 112px 12px 12px 12px;
  margin-bottom: 36px;
}

.art_img_div {
  height: 300px;
  margin: 8px;
  cursor: pointer;
  position: relative;
  float: left;
  clear: none;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.art_img_img {
  height: 100%;
  flex: none;
}

我尝试运行一个javascript函数，根据document.body.heightoffSet重新计算div的高度，但没有成功，因为它返回了错误的值。

Answer 1

创建快速项目后，我理解你的问题。如果我错了，请纠正我来自#content的容器没有环绕整个图像。这里的问题是，你使用

float:left

在图像容器上。导致它被从页面流中取出（并且父元素没有完全包裹它们）。简单的解决方法是添加

#content:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0;
}

你在#content中有一个padding-bottom，它会被padding属性立即覆盖 PS：下一次jsfiddle会有所帮助：）

php echo不改变高度的元素

1 个答案: