Question

我想将以下div + select元素彼此相邻放置。到达html宽度的末尾后，应将以下元素包装到下一行。请注意，所有的div都具有相同的className并且数量是动态的。有人可以帮助使用CSS / reactjs / jquery实现此目标。预先感谢！

<div className="filterContainer">
    <div className="filterChildDiv">
        <label className="filterHeader">Status</label>
        <Select className="select-teams" />
    </div>

    <div className="filterChildDiv">
        <label className="filterHeader">Status</label>
        <Select className="select-teams" />
    </div>
</div> 
    ...

CSS：

.filterChildDiv{
    flex: 1;
    margin-right: 20px;
}

.filterContainer{
    display: flex;
    flex-wrap: wrap;
}

Answer 1

使用Bootstrap

<div class="container">
<div class="row">
    <div class="col-sm-3">
        <label class="filterHeader">Status</label>
        <select class="select-teams" >
          <option>choose something</option>
        </select>
    </div>
    <div class="col-sm-3">
        <label class="filterHeader">Status</label>
        <select class="select-teams" >
         <option>choose something</option>
        </select>
    </div>
    <div class="col-sm-3">
        <label class="filterHeader">Status</label>
        <select class="select-teams" >
         <option>choose something</option>
        </select>
    </div>
    <div class="col-sm-3">
        <label class="filterHeader">Status</label>
        <select class="select-teams" >
         <option>choose something</option>
        </select>
    </div>
    <div class="col-sm-3">
        <label class="filterHeader">Status</label>
        <select class="select-teams" >
         <option>choose something</option>
        </select>
    </div>
 </div>
 </div>

Answer 2

看起来像这样吗？

    setInterval(() => {
      document.getElementsByClassName('container')[0].innerHTML += `<div class="filterChildDiv">
      <label class="filterHeader">Status</label>
      <Select class="select-teams" />
    </div>`;
    }, 500);

* {
      margin: 0;
      padding: 0;
    }

    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .filterChildDiv {
      display: flex;
      flex: 1;
      margin-right: 20px;
    }
    .filterChildDiv *{
      flex-grow: 1;
    }

<div class="container">
    <div class="filterChildDiv">
      <label class="filterHeader">Status</label>
      <Select class="select-teams" />
    </div>    <div class="filterChildDiv">
      <label class="filterHeader">Status</label>
      <Select class="select-teams" />
    </div>    <div class="filterChildDiv">
      <label class="filterHeader">Status</label>
      <Select class="select-teams" />
    </div>    <div class="filterChildDiv">
      <label class="filterHeader">Status</label>
      <Select class="select-teams" />
    </div>    <div class="filterChildDiv">
      <label class="filterHeader">Status</label>
      <Select class="select-teams" />
    </div>    <div class="filterChildDiv">
      <label class="filterHeader">Status</label>
      <Select class="select-teams" />
    </div>    <div class="filterChildDiv">
      <label class="filterHeader">Status</label>
      <Select class="select-teams" />
    </div>    <div class="filterChildDiv">
      <label class="filterHeader">Status</label>
      <Select class="select-teams" />
    </div>
    <div class="filterChildDiv">
      <label class="filterHeader">Status</label>
      <Select class="select-teams" />
    </div>    <div class="filterChildDiv">
      <label class="filterHeader">Status</label>
      <Select class="select-teams" />
    </div>    <div class="filterChildDiv">
      <label class="filterHeader">Status</label>
      <Select class="select-teams" />
    </div>    <div class="filterChildDiv">
      <label class="filterHeader">Status</label>
      <Select class="select-teams" />
    </div>    <div class="filterChildDiv">
      <label class="filterHeader">Status</label>
      <Select class="select-teams" />
    </div>    <div class="filterChildDiv">
      <label class="filterHeader">Status</label>
      <Select class="select-teams" />
    </div>    <div class="filterChildDiv">
      <label class="filterHeader">Status</label>
      <Select class="select-teams" />
    </div>    <div class="filterChildDiv">
      <label class="filterHeader">Status</label>
      <Select class="select-teams" />
    </div>
    <div class="filterChildDiv">
      <label class="filterHeader">Status</label>
      <Select class="select-teams" />
    </div>    <div class="filterChildDiv">
      <label class="filterHeader">Status</label>
      <Select class="select-teams" />
    </div>    <div class="filterChildDiv">
      <label class="filterHeader">Status</label>
      <Select class="select-teams" />
    </div>    <div class="filterChildDiv">
      <label class="filterHeader">Status</label>
      <Select class="select-teams" />
    </div>
    <div class="filterChildDiv">
      <label class="filterHeader">Status</label>
      <Select class="select-teams" />
    </div>
    <div class="filterChildDiv">
      <label class="filterHeader">Status</label>
      <Select class="select-teams" />
    </div>    <div class="filterChildDiv">
      <label class="filterHeader">Status</label>
      <Select class="select-teams" />
    </div>    <div class="filterChildDiv">
      <label class="filterHeader">Status</label>
      <Select class="select-teams" />
    </div>
    <div class="filterChildDiv">
      <label class="filterHeader">Status</label>
      <Select class="select-teams" />
    </div>
    <div class="filterChildDiv">
      <label class="filterHeader">Status</label>
      <Select class="select-teams" />
    </div>    <div class="filterChildDiv">
      <label class="filterHeader">Status</label>
      <Select class="select-teams" />
    </div>    <div class="filterChildDiv">
      <label class="filterHeader">Status</label>
      <Select class="select-teams" />
    </div>    <div class="filterChildDiv">
      <label class="filterHeader">Status</label>
      <Select class="select-teams" />
    </div>
  </div>

CSS-将相同的类组合在一起并包装

2 个答案: