如何找到孩子的边界

Question

我试图将标题对齐在最后一个Div的顶部。根据下图，文本应位于＆＃34; Hello 5/4/3＆＃34;之上。当我们调整窗口大小时，按钮将浮动，它正在工作，文本应始终位于最后一个按钮的顶部。

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

是的，显示：flex可能非常有帮助。作为一种解决方法，你可以将.wrapper的宽度设置为70vw或类似的东西。 .wrapper div宽度正在创建＆＃34;额外空间。＆＃34;

Answer 2

在页面调整大小时，您需要在第一行中找到.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 中创建了它。