如何浮動動態div的彼此相鄰？

Question

我正在基於CSS創建我自己的Twitter Bootstrap單選按鈕。所選單選按鈕的視覺反饋基於input[type="radio"]:checked + span。

由於我的「按鈕」的內容可以變化，寬度是動態的。這導致問題對齊按鈕相鄰。我的JSfiddle我已經設置了50px的固定寬度。去除這個和按鈕在彼此之上。

任何人都可以指出我如何實現這一目標的正確方向？

這裏是我的代碼：

//HTML 
<div class="button-group binary" data-toggle="buttons-radio"> 
    <div class="radio-wrapper"> 
     <input type="radio" class="active" name="status" value="1" /> 
     <span class="background">Yes</span> 
    </div> 
    <div class="radio-wrapper"> 
     <input type="radio" class="inactive" name="status" value="0" checked="checked" /> 
     <span class="background">No</span> 
    </div> 
</div> 

//CSS 
.button-group{ 
    /*display: table;*/ 
    display: block; 
} 
.radio-wrapper { 
    /*display: table-cell; */ 
    display: inline-block; 
    position: relative; 
    height: 28px; 
    margin: 0; 
    width: 50px; /* I want this to be dynamic */ 
} 

.radio-wrapper:first-child .background{ 
    border-right: 0;  
    border-top-left-radius: 4px; 
    border-bottom-left-radius: 4px; 
} 

.radio-wrapper:last-child .background{ 
    border-top-right-radius: 4px; 
    border-bottom-right-radius: 4px; 
} 


input[type="radio"]{ 
    position: absolute; 
    display: block; 
    height: 28px; 
    width: 100%; 
    z-index: 200; 
    cursor: pointer; 
    opacity: 0; 
} 

input[type="radio"]:checked + span { 
    background-color: #63B1DE; 
    color: #fff; 
} 


.background { 
    position: absolute; 
    z-index: 100; 
    height: 100%; 
    padding: 0 5px; 
    border: solid 1px #87A2B2; 
    background-color: #fff; 
    text-align: center; 
    line-height: 28px; 
    text-transform: uppercase; 
} 

Answer 1

如果你從後臺類中刪除position: absolute，你將不再需要寬度的風格：

jsFiddle

.button-group{ 
    /*display: table;*/ 
    display: block; 
} 
.radio-wrapper { 
    /*display: table-cell; */ 
    display: inline-block; 
    position: relative; 
    height: 28px; 
    margin: 0; 
    /*width: 50px; not needed*/ 
} 

.radio-wrapper:first-child .background{ 
    border-right: 0;  
    border-top-left-radius: 4px; 
    border-bottom-left-radius: 4px; 
} 

.radio-wrapper:last-child .background{ 
    border-top-right-radius: 4px; 
    border-bottom-right-radius: 4px; 
} 


input[type="radio"]{ 
    position: absolute; 
    display: block; 
    height: 28px; 
    width: 100%; 
    z-index: 200; 
    cursor: pointer; 
    opacity: 0; 
} 

input[type="radio"]:checked + span { 
    background-color: #63B1DE; 
    color: #fff; 
} 


.background { 
    z-index: 100; 
    height: 100%; 
    padding: 0 5px; 
    border: solid 1px #87A2B2; 
    background-color: #fff; 
    text-align: center; 
    line-height: 28px; 
    text-transform: uppercase; 
} 

Answer 2

在看看你的CSS，我認爲你遇到的問題是因爲你正在使.backgroundposition: absolute它不是羚牛g在其父文件中的任何空間，所以父文件沒有任何寬度，這就是爲什麼你必須手動設置它。剔除.background的絕對位置，實際上使其成爲一個佔用空間的元素將給父寬度（這將基於其內容）。現在至於糾正問題上的，我想這裏漂浮的一些東西會起作用。 CSS是在這裏（我也去掉了一些不必要的規則）

.radio-wrapper { 
    position: relative; 
    float:left; 
} 

.radio-wrapper:first-child .background{ 
    border-right: 0;  
    border-top-left-radius: 4px; 
    border-bottom-left-radius: 4px; 
} 

.radio-wrapper:last-child .background{ 
    border-top-right-radius: 4px; 
    border-bottom-right-radius: 4px; 
} 


input[type="radio"]{ 
    position: absolute; 
    display: block; 
    height: 28px; 
    width: 100%; 
    z-index: 200; 
    cursor: pointer; 
    opacity: 0; 
} 

input[type="radio"]:checked + span { 
    background-color: #63B1DE; 
    color: #fff; 
} 


.background { 
    height: 100%; 
    padding: .5em; 
    border: solid 1px #87A2B2; 
    background-color: #fff; 
    text-align: center; 
    line-height: 28px; 
    text-transform: uppercase; 
} 

按照例如fiddle。

我確實增加了一點，但是您可以根據需要隨意調整。我也喜歡填充ems，所以如果你的字體大小變化，填充總是相對的。