javascript - 如何找到子Divs的边界

Question

我试图将标题右对齐到最后一个 Div 的顶部。根据下图，文本应位于“Hello 5/4/3”之上。当我们调整窗口大小时，窗口按钮将 float ，这是有效的，文本应始终位于最后一个按钮的顶部。

不确定为什么包装 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;
}

Answer 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 中创建了它.