子Divsの境界を見つける方法

Question

最後の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; 
} 

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でそれを作成します。

Answer 2

はい、ディスプレイ：フレックスは非常に役に立つかもしれません。あなたの周りの仕事として、70vw、またはそれに類するものに.wrapperの幅を設定することができます。 .wrapper divの幅が "余分なスペース"を作成しています。