CSS - 自动调整div的宽度

Question

我有一个下拉栏，其中包含一系列可供选择的选项。我希望它们是内联的，但也希望它们具有可扩展性，以便它们占用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>推到新行（aka ，例如，不使用display: block;。

我愿意使用JS或jQuery，但更喜欢仅使用html和css。

谢谢。

Answer 1

这是使用flexbox的典型情况：

将容器定义为flex-container并为其提供以下设置：

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

（第一个设置将在行中进行相等分布，第二个设置将flex项（子元素）放入几行）