垂直溢出隐藏的动态高度DIV，需要向右移动答案

【问题标题】：Vertically overflow hidden dynamic height DIVs, needs to move to right垂直溢出隐藏的动态高度DIV，需要向右移动
【发布时间】：2017-08-10 22:06:04
【问题描述】：

如何垂直溢出隐藏的动态高度子 DIV 可以向右移动？

.parent {
  height: 510px;
  width: 100px;
  overflow-y: hidden
}

.child {
  width: 49px;
  /* **Note**: Height cannot be hardcoded since it changes based on the data from response */
}

<div class="parent">
  <div class="child">child1</div>
  <div class="child">child2</div>
  <div class="child">child3</div>
  <div class="child">child4</div>
  <div class="child">child5</div>
</div>

【问题讨论】：

能否请您更具体地说明您想做什么？
我什至无法理解你想说什么。请清楚地解释您需要该代码做什么。
感谢萨加尔的回复！父 DIV 容器是我网页的一部分。在其中，我有 5 个子 DIV 容器，其高度根据数据而变化。例如：Child1 高度为 100px，Child2 高度为 200px，Child3 高度为 150px，...
Child4 高度为 250 像素，Child5 高度为 175 像素，...因此在 Child1 和 2 中，由于溢出：隐藏，仅适合父项。在这种情况下，其余三个子 3,4 和 5 DIV 被隐藏，因此为了使其可见，我想将这些容器向右移动。如果您有更好的解决方案，您能否帮助实现这一目标或建议我？
@user3721995 请编辑您的问题并包含解释，而不是在 cmets 中发布它

标签： javascript jquery html css

【解决方案1】：

我认为这是不可能的。如果是，那么我不知道该解决方案。我目前可以想到两种方法来实现您想要的解决方案。

1> 将父 div 的 width 大小增加到足以包含所有子列的大小。 2> 为所有child增加有限高度的溢出滚动效果，增加parent的溢出高度。

另外在旁注中，我看到您父母的宽度是 100 像素，而孩子是 49 岁。我相信您希望在父母中至少有 2 行并排。为此，请将 float 属性添加到子 css 中

.parent {
   text-align: center;
   height: 510px;
   width: 100px;
   overflow-y: hidden
}

.child {
   width: 50px;
   display: inline-block;
}

【讨论】：

投反对票的人请务必提及原因，以便我可以改进并避免将来犯同样的错误
感谢您的回复！我尝试过左浮动，但在子容器之间产生了空白空间问题。可能是 Javascript 或 jQuery 可以帮助我们。
我的要求是，第一个垂直列应该完全填充然后填充下一个垂直列。
我的要求是，第一个垂直列应该完全填充，然后填充第二个垂直列。所以第一列中的空白是不允许的。
Float:left 在这种情况下最多相当于 display:inline-blank。

【解决方案2】：

<!-- Begin HTML -->    
    <div class="parent">
      <div class="child" id="firstCategory">child1</div>
      <div class="child" id="sceondCategory">child2</div>
      <div class="child" id="thirdCategory">child3</div>
      <div class="child" id="fourthCategory">child4</div>
    </div>
<!-- End HTML -->    
<!-- Begin CSS -->    
    .handle-first-right-category{
        position: absolute;
        left: 50.5%;    
        /* bottom: 65.5%; Note: To handle the calculation its better to hard code in px instead of using % */
        top: 0px;
    }

    .handle-second-right-category{
        position: absolute;
        left: 50.5%;
    }

    .handle-third-right-category{
        position: absolute;
        left: 50.5%;
    }
    <!-- End CSS -->    
<!-- Begin angular js -->    
    var firstCategory = angular.element('#firstCategory'); 
    var secondCategory = angular.element('#secondCategory');
    var thirdCategory = angular.element('#thirdCategory';
    var fourthCategory = angular.element('#fourthCategory';

                if(firstCategory && secondCategory && 
                        (firstCategory.offsetHeight + secondCategory.offsetHeight > 510)){
                    //Move the 2nd, 3rd & 4th categories to right
                    secondCategory.classList.add('handle-first-right-category');
                    if (thirdCategory) {
                        thirdCategory.classList.add('handle-second-right-category');
                        thirdCategory.style.top = secondCategory.offsetHeight + 5 + "px";
                    }
                    if (fourthCategory){
                        fourthCategory.classList.add('handle-third-right-category');
                        fourthCategory.style.top = secondCategory.offsetHeight + thirdCategory.offsetHeight + 10 +  "px";
                    }   
                }
                else if(firstCategory && secondCategory && thirdCategory && 
                        (firstCategory.offsetHeight + secondCategory.offsetHeight + thirdCategory.offsetHeight > 510)){
                    //Move the 3rd & 4th categories to right
                    thirdCategory.classList.add('handle-first-right-category');
                    if (fourthCategory){
                        fourthCategory.classList.add('handle-second-right-category');
                        fourthCategory.style.top = thirdCategory.offsetHeight + 5 +  "px";
                    }   
                }
                else if(firstCategory && secondCategory && thirdCategory && fourthCategory && 
                        (firstCategory.offsetHeight + secondCategory.offsetHeight + thirdCategory.offsetHeight + fourthCategory.offsetHeight > 510)){
                    //Move the 4th category to right
                    fourthCategory.classList.add('handle-first-right-category');
                }
<!-- End angular js -->

【讨论】：