如何找到子Divs的边界答案

【问题标题】：How to find the boundary of child Divs如何找到子Divs的边界
【发布时间】：2016-05-12 01:14:19
【问题描述】：

我试图右对齐最后一个 Div 顶部的标题。根据下图，文本应位于“Hello 5 / 4 / 3”之上。当我们调整窗口按钮的大小时，它会浮动，并且文本应该始终位于最后一个按钮的顶部。

不确定为什么包装 div 会在按钮右侧添加额外的空间，而不是与最右侧 div 的边缘对齐。即使没有标题，也会有额外的空间，任何关于 Div 宽度计算的见解都会很棒。

我尝试使用 javascript 计算顶行中的按钮数量，并在标题中添加了偏移量，但这似乎很乏味，并且在某些分辨率下不对齐。

http://jsbin.com/nonexegiqa/embed?html,css,console,output

HTML

<div class="wrapper">
   <div class="title">Title</div>
   <div class="clear"/>
   <div class="btn">Hello 1</div>
   <div class="btn">Hello 2</div>
   <div class="btn">Hello 3</div>
   <div class="btn">Hello 4</div>
   <div class="btn">Hello 5</div>
   <div class="btn">Hello 6</div>
   <div class="clear"/>
 </div>

CSS

 .wrapper{
  border:solid gray 1px;
}
.btn{
  width:96px;
  height:46px;
  float:left;
  border:solid gray 1px;
  margin-left : 11px;
  margin-bottom : 11px;
  text-align:center;

}

.title{
  float:right;
}

.clear{
  clear:both;
}

【问题讨论】：

尝试查看一些带有响应列的框架，例如引导程序或基础等
你想在hello 4之上设置title？
我试图让标题应该在最后一个子 Div 的顶部。 .

标签： javascript html css

【解决方案1】：

当页面调整大小时，您需要在第一行找到.btn的计数，然后将.title的位置设置为第一行的最后一个.btn。

$(window).on("resize", function(){
    var parWidth = $(".wrapper").innerWidth();
    var chiWidth = $(".wrapper .btn").first().outerWidth(true);

    var childCount = 0;
    while(parWidth >= chiWidth){
        parWidth -= chiWidth;
        childCount ++;
    }   
    var left = $(".btn:eq("+(childCount-1)+")").position().left;

    $(".title").css("margin-left", left);
});

为了更好地理解，我创建了演示，但因为您无法在此处更改演示页面大小，所以我在 JSFiddle 中创建它。

【讨论】：

太棒了。有没有办法使用 CSS 实现，只是问问？
@Anandh 不，因为当你调整页面大小时，最后一个.btn 改变了，你需要找到最后一个.btn。
如果我们能让父级Div足够灵活并根据子级调整它的宽度是可能的，您能否提供一些关于DOM如何计算DIV大小的见解。

【解决方案2】：

是的，display:flex 可能会很有帮助。作为一种解决方法，您可以将 .wrapper 的宽度设置为 70vw 或类似的值。 .wrapper div 宽度正在创建“额外空间”。

【讨论】：