不管寬度如何獲得一個按鈕和一個計數框內嵌容器的整個寬度？

Question

我有一個按鈕和一個容器在一個單一的線，我試圖讓按鈕是全寬（btn-block in bootstrap），而計數框是在同一行。現在的問題是我可以在同一行上得到按鈕，如果我給它一個固定的寬度，但如果容器在其他分辨率上的寬度較小，或者如果該按鈕的計數爲4834而不是例如，3。

這是我現在有：

<div class="button-container"> 

<div class="btn btn-primary">Boo</div> 
<div id="count_box" class="count_box">42</div> 

</div> 

的.count_box有這個CSS：

.count_box { 
    position: relative; 
    background: #FFF; 
    border: 1px solid #333; 
    display: inline-block; 
    margin-left: 10px; 
    border-radius: 3px; 
    padding: 6px 10px; 
    top: 1px; 
    color: #333; 
} 

注意.button_container可以600px的寬或200像素寬，等等。所以我不能給它是固定的寬度。一個jsFiddle比這裏的代碼更好地解釋它：http://jsfiddle.net/gdrpmr13/1/

是否有任何簡單的方法來獲得按鈕和計數在同一行和按鈕是100％（減去計數的寬度）？我迷路了。

Answer 1

您可以通過一些智能浮動操作來實現，以便所有寬度都是動態的，並且仍然按鈕填充剩餘寬度。請注意，我在按鈕之前添加了類pull-right計數框並將其移動了。

.button-container .btn { 
 
    display: block; 
 
    width: auto; 
 
    overflow: hidden; 
 
} 
 
.count_box { 
 
    position: relative; 
 
    background: #FFF; 
 
    border: 1px solid #333; 
 
    margin-left: 10px; 
 
    border-radius: 3px; 
 
    padding: 6px 10px; 
 
    top: 1px; 
 
    color: #333; 
 
} 
 
.count_box:after, .count_box:before { 
 
    right: 100%; 
 
    top: 50%; 
 
    border: medium solid transparent; 
 
    content:" "; 
 
    height: 0px; 
 
    width: 0px; 
 
    position: absolute; 
 
    pointer-events: none; 
 
} 
 
.count_box:after { 
 
    border-color: rgba(255, 255, 255, 0) #FFF rgba(255, 255, 255, 0) rgba(255, 255, 255, 0); 
 
    border-width: 8px; 
 
    margin-top: -8px; 
 
} 
 
.count_box:before { 
 
    border-color: rgba(221, 221, 221, 0) #333 rgba(221, 221, 221, 0) rgba(221, 221, 221, 0); 
 
    border-width: 9px; 
 
    margin-top: -9px; 
 
} 
 
.button-container { 
 
    display: inline-block; 
 
    width: 400px; 
 
    background-color: #FF0000; 
 
    padding:20px 0px; 
 
} 
 
.button-container-2 { 
 
    margin-top:20px; 
 
    display: inline-block; 
 
    width: 200px; 
 
    background-color: #FF0000; 
 
    padding:20px 0px; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css"> 
 

 
<div class="button-container"> 
 
    <div class="count_box pull-right">42</div> 
 
    <div class="btn btn-primary">Boo</div> 
 
</div> 
 
<div class="button-container"> 
 
    <div class="count_box pull-right">4333234</div> 
 
    <div class="btn btn-primary">Boo</div> 
 
</div>

這裏是另一個演示與演示時，父容器的大小調整它是如何工作的（調整演示窗格）：http://jsfiddle.net/gdrpmr13/3/

Answer 2

你可以讓計數的一部分，比如60px和剩餘寬度的按鈕。

所以你應該選擇這個60px寬度通過假設你在那裏期望的最大數量，然後按照你想要的方式對齊它。

HTML

<div class="button-container"> 

<div class="btn btn-primary btn-block-almost">Boo</div> 
<div id="count_box" class="count_box">42</div> 

</div> 

<div class="button-container-2"> 

<div class="btn btn-primary btn-block-almost">Boo</div> 
<div id="count_box" class="count_box">4255</div> 

</div> 

CSS

.count_box { 
    position: relative; 
    background: #FFF; 
    border: 1px solid #333; 
    display: inline-block; 
    margin-left: 10px; 
    border-radius: 3px; 
    padding: 6px 10px; 
    top: 1px; 
    color: #333; 
    width: 60px; 
} 
.btn-block-almost{ 
width: calc(100% - 80px); 
} 

只是增加了一些CSS和一類以您的標記，這看起來好像沒什麼問題

小提琴：https://jsfiddle.net/arpit_goyal/81npkrdj/