Question

我在容器中有一个div列表。

HTML：

<div class="container">
    <div class="item">item 1</div>
    <div class="item">item 2 some text some text some text</div>
    <div class="item">item 3</div>
    <div class="item">item 4</div>
    <div class="item">item 5 some text/div>
    <div class="item">item 6</div>
    <div class="item">item 7 some text some text some text some text some text some text</div>
    <div class="item">item 8 some text</div>
    <div class="item">item 9</div>
</div>

CSS：

.container {
    border: 1px solid red;
    padding: 10px;
}

.item {
    display: inline-block;
    border: 1px solid green;
    width: 120px;
    margin: 10px;
    background-color:blue;
}

在这种情况下，结果是“项目”具有不同的高度，与每个项目内的文本相关。

我会更改“items”div的行为，以便ROW的较高“item”div将其高度传递给其他div，但只传递给同一行中的那些。

因此，每一行的“item”必须具有其行“更高元素”的高度。

显然，如果我改变视口的大小，行的顺序会改变，改变排列。

Jquery或javascript，请。

Answer 1

不需要JavaScript或jQuery。使用css3 flexbox。

.container {
  border: 1px solid red;
  flex-wrap: wrap;
  display: flex;
}

.item {
  border: 1px solid green;
  width: 120px;
  margin: 10px;
  background-color:blue;
}

<div class="container">
    <div class="item">item 1</div>
    <div class="item">item 2 some text some text some text</div>
    <div class="item">item 3</div>
    <div class="item">item 4</div>
    <div class="item">item 5 some text</div>
    <div class="item">item 6</div>
    <div class="item">item 7 some text some text some text some text some text some text</div>
    <div class="item">item 8 some text</div>
    <div class="item">item 9</div>
</div>

jQuery选择器，用于将更高的内联块div放入其容器的行中

1 个答案: