Question

我正在建立一个网站，并尝试获取一组具有相同类（.ThumbDiv）的div，以自动知道在父div（.RedBar）中可以容纳多少个div。我已将.RedBar（.ThumbsBox）的父div设置为使用％.RedBar与浏览器一起调整大小，使其为.ThumbsBox，.ThumbDivs的宽度的100％内联阻止和隐藏.ThumbsBox的溢出。它可以正常工作，但是我现在需要一个悬停功能来将每个.ThumbDiv的大小扩展到.ThumbsBox的大小之外，因此我计划删除父级的overflow:hidden并仅使用javascript通过onresize事件添加和删除.ThumbDivs，并根据需要编辑显示内容，但是我是javascript新手，也不知道语法的措辞或大部分功能的作用。

我尝试使用变量代替“ this”，但没有区别。

function CheckThumbsNumber()
{
    //var thisO = this;
    var numOfThumbs = Math.floor(this.style.width / document.getElementByClassName("ThumbDiv").style.width);
    var i = 0;

    for(i = 0; i < numOfThumbs; i++)
    {
        this.children[0].children[i].style.display = "inline-block";
    }

}

//My HTML Code

<div class="ThumbsBox" onresize="CheckThumbsNumber()">
    <div class="RedBar">
        <div class="ThumbDiv">...</div>
        <div class="ThumbDiv">...</div>
        <div class="ThumbDiv">...</div>
        <div class="ThumbDiv">...</div>
        <div class="ThumbDiv">...</div>
        <div class="ThumbDiv">...</div>
    </div>
</div>

我正在Chrome中使用notepad ++和html编辑器，都说没有错误消息，但是没有显示ThumbDivs

UPDATE

这是我使用javascript调整功能的正确方法，可在调整浏览器大小时使用较小的div来容纳较大的div，而无需使用overflow:hidden：

//Checks if any red bars exist on the page.
if (document.getElementsByClassName("RedBar").length > 0) {
  window.onload = CheckThumbsNumber();
  window.addEventListener('resize', CheckThumbsNumber /*Calls the function WITHOUT parentheses, I tried adding the event to each of my redbars individually but when I put "this" as the parameter, it only recognized it as the window element, as the "resize" event can only be added to the window element*/ );

  function CheckThumbsNumber() {
    var rBarList = document.getElementsByClassName("RedBar"); /*Gets every redbar on the page*/
    var tDivList = document.getElementsByClassName("ThumbDiv"); /*Gets every Thumbnail div on the page but only so I can get the width of one*/

    var rBarWidth = rBarList[0].offsetWidth; /*There are many different ways to get the width of an element, figure out the one that best helps with what you need to do*/
    var tDivWidth = document.getElementsByClassName("ThumbDiv")[0].offsetWidth;

    var numOfThumbs = Math.floor((rBarWidth - 30) / tDivWidth); /*Determines how many red boxes can fit*/
    var i = 0;
    //For loop goes through the list of ThumbDivs inside each RedBar and only turns off the ones that go past the width of the RedBar
    for (i = 0; i < rBarList.length; i++) {
      var rTDivList = rBarList[i].getElementsByClassName("ThumbDiv");
      var sI = 0;
      for (sI = 0; sI < rTDivList.length; sI++) {
        if (sI < numOfThumbs) {
          rTDivList[sI].style.display = "inline-block";
        }
        if (sI >= numOfThumbs) {
          rTDivList[(sI)].style.display = "none";
        }
      }
    }
  }
}

.ContentBox {
  border-style: solid;
  border-color: #262626;
  border-width: 5px;
  border-radius: 5px;
  width: 99%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
}

#ContentHeader {
  text-align: left;
  width: 100%;
}

#ContentHeader h1 {
  color: black;
}

.ThumbsBox {
  box-shadow: 0 0 20px 1px black;
  border-style: solid;
  border-color: blue;
  border-width: 2px;
  border-radius: 15px;
  display: inline-block;
  width: 99%;
  height: 190px;
  margin-bottom: 10px;
}

.RedBar {
  margin-top: 44px;
  background-color: red;
  width: 100%;
  height: 40px;
}

.ThumbDiv {
  background-color: red;
  display: inline-block;
  position: relative;
  bottom: 30px;
  width: 142px;
  height: 142px;
  margin-bottom: 20px;
}

<!DOCTYPE html>
<html lang="en-US">

<head>
  <link href="HomePageStyleSheet.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div class="ContentBox">
    <div id="ContentHeader">
      <h1>Content Box</h1>
    </div>
    <div class="ThumbsBox">
      <div class="RedBar">
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
      </div>
    </div>
    <div class="ThumbsBox">
      <div class="RedBar">
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
      </div>
    </div>
  </div>
  <script src="HomePageJSFile.js"></script>
  <!--The script must be at the bottom of the <body> or it won't be able to reference any code-->
</body>

</html>

仅当较大的div内有空间时，如何才能在较大的div显示器内显示较小的div？

0 个答案: