javascript - php回显元素不改变高度

Question

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

问题出在 <div> 之后的高度没有改变，即使 body 的高度正确并且所有图像都显示出来，但 div 没有显示出来。如果它是一个透明的 div，那没问题，但它的背景只有 83px，从第一个跨度开始，div 的高度应该是大约 1000 像素的高度，与图像占用的高度相同。

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 会有所帮助 :)