CSS - 自動調整div的寬度

我有一個下拉欄，有一堆可供選擇的選項。我希望它們是內聯的，但也希望它們可擴展，以便它們佔據整個div的寬度（但也允許每行有多個選項）。這是我到目前爲止有一張照片：CSS - 自動調整div的寬度

下面是HTML我有：

<h2>FILTERs</h2> 
<span>Search:</span> 
<input id="searchBox" type="text"></input> 
<div id="conts" class="filter"> 
    <div class="label"> 
    <span>Option:</span> 
    </div> 
    <div class="content"> 
    <div class="selector">Di1</div> 
    <div class="selector">Di 12</div> 
    <div class="selector">D 15</div> 
    <div class="selector">Div1</div> 
    <div class="selector">v1234</div> 
    <div class="selector">Di 3</div> 
    <div class="selector">D 12</div> 
    <div class="selector">v 1234</div> 
    <div class="selector">Di</div> 
    <div class="selector">D 123</div> 
    </div> 
</div>

和CSS：

.filter .content{ 
    max-width: 96px; 
    max-height: 0px; 
    margin: 0px 12px 0px 4px; 
    background-color: #808080; 
    overflow: hidden; 
} 
#vertnav .filter:hover .content{ 
    max-height: 256px; 
} 
.content .selector{ 
    background-color: #369; 
    padding: 8px 4px; 
    display: inline-block; 
    text-align: center; 
    cursor: pointer; 
    box-sizing: border-box; 
    transition: .1s !important; 
} 
.content .selector:hover{ 
    background-color: white; 
    color: #369; 
}

的最終目標是同一行上的每個<div>將自動填充它所在行的寬度，而不會推動其他<div>秒到一個新的線路上（也就是說，例如，不使用display: block;）。

我願意使用JS或jQuery，但寧願只爲此使用html和css。

謝謝。

來源

2016-07-24 4lackof

這是使用Flexbox的一個典型的情況：

定義容器作爲柔性容器，並給它下列設置：

content { 
    display: flex; 
    flex-wrap: wrap; 
}

（第一設置將做在線相等分佈，第二個將彈性物品（兒童元素）分成幾行）

來源

2016-07-24 19:50:04 Johannes

感謝您的快速回答。我試過了，現在div之間沒有空格，但是他們沒有佔用右側的剩餘空間（看起來像是左對齊）。我編輯了上面的答案中的代碼，因爲我意識到存在一個縮進問題，所以它應該更易於閱讀。 – 4lackof

謝謝你，給孩子增加'flex-grow：1;'，它的效果很好！ – 4lackof

CSS - 自動調整div的寬度

回答

相關問題