Question

我有2列。我需要指定哪些列项，但我还需要它们具有相同的高度。

所以目前我有这个：

＆＃13;

* {
  box-sizing: border-box;
}
.cont {
  margin: auto;
  width: 500px;
  display: flex;
}
.row {
  flex-basis: 50%;
  align-self: top;
  border: 1px solid blue;
}
.item {
  background: grey;
  padding: 10px;  
  border: 1px solid green;
}

＆＃13;

<div class="cont">
  <div class="row">
<div class="item">
  <h2>Item 1</h2>
  <p>Here is short text</p>
</div>
<div class="item">
  <h2>Item 2</h2>
  <p>Here is short text</p>
</div>
  </div>
  <div class="row">
<div class="item">
 <h2>Item 3</h2>
  <p>Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. </p>
</div>
  </div>
</div>

＆＃13;

但我需要的是：

我不想设置像素的高度，因为我的文字是动态的，而且布局是响应的（我的代码中设置的500px宽度只是为了演示问题）。

我可以用JavaScript测量高度并设置一个最小高度，但它的hacky，是否有CSS解决方案？

更新 - 我的代码示例已简化。实际上，我将需要对大量项目进行排序＆＃34;对＆＃34;或＆＃34;离开＆＃34;。他们需要的项目和列是动态的。

Answer 1

如果允许更改html，则可以通过将所有元素放在同一行并使用wrap来使用flex。然后你可以使用order属性控制位置，如下所示：

* {
  box-sizing: border-box;
}

.cont {
  margin: auto;
  display: flex;
  width: 500px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid blue;
}

.item {
  background: grey;
  padding: 10px;
  border: 1px solid green;
  flex: 0 0 50%;
}

.item:nth-child(1) {
  order: 1;
}

.item:nth-child(2) {
  order: 3;
}

.item:nth-child(3) {
  order: 2;
}

<div class="cont">
  <div class="row">
    <div class="item">
      <h2>Item 1</h2>
      <p>Here is short text</p>
    </div>

    <div class="item">
      <h2>Item 2</h2>
      <p>Here is short text</p>
    </div>
    <div class="item">
      <h2>Item 3</h2>
      <p>Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. </p>
    </div>
  </div>
</div>

Answer 2

如果 ALL 项目必须具有相同的高度，您将需要javascript ，因为没有CSS方法可以根据需要均衡高度。

但是，如果＆＃34;行＆＃34; 需要具有相等的项目，则可以使用CSS网格和grid-auto-flow:column进行此操作。

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

.container {
  display: grid;
  grid-auto-flow: column;
}

.item {
  border: 1px solid grey;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}

.left {
  background: rebeccapurple;
  color: white;
  grid-column: 1;
}

.right {
  background: orange;
  grid-column: 2;
}

.small {
  min-height: 32px;
}

.medium {
  min-height: 60px;
}

.large {
  min-height: 120px;
}

＆＃13;

<div class="container">
  <div class="item left small">L1</div>
  <div class="item left medium">L2</div>
  <div class="item right large">R1</div>
  <div class="item left large">L3</div>
  <div class="item right small">R2</div>
  <div class="item right medium">R3</div>
  <div class="item left small">L4</div>
</div>

＆＃13;

请注意，无论最小高度（仅用于演示目的），每个＆＃34;行＆＃34;中的项目都是如此。最大化到最高项目的高度。

Answer 3

* {
  margin:0px;
 padding:0px;
}
html,body{
        width:100%;
}
.cont {
    width: 500px;
     display: table;
    border-spacing: 2px;
    border:1px solid blue;
       border-collapse: collapse;
}
.row {
        display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
.item{
    display: table-cell;
    vertical-align: inherit;
    vertical-align: middle;
    padding:10px;
    word-break:break-all;
}
.item:nth-child(even){
   border:1px solid blue;
   border-bottom:1px solid green;
}
.item:nth-child(odd){
   border:1px solid blue;
   border-bottom:1px solid green;
}

<html>
<body>
<div class="cont">
  <div class="row">
        <div class="item">
          <h2>Item 1</h2>
          <p>Here is short text</p>
        </div>
        <div class="item">
         <h2>Item 2</h2>
          <p>Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. . Here is Longer text. Here is Longer text. Here is Longer text. Here i . Here is Longer text. Here is Longer text. Here is Longer text. Here i . Here is Longer text. Here is Longer text. Here is Longer text. Here i . Here is Longer text. Here is Longer text. Here is Longer text. Here i . Here is Longer text. Here is Longer text. Here is Longer text. Here i . Here is Longer text. Here is Longer text. Here is Longer text. Here i . Here is Longer text. Here is Longer text.  Here is Longer text.WW</p>
        </div>
  </div>
  <div class="row">
        <div class="item">
          <h2>Item 3</h2>
          <p>Here is short text</p>
        </div>
        <div class="item">
          <h2>Item 4</h2>
          <p>Here is short text</p>
        </div>
  </div>
  <div class="row">
        <div class="item">
          <h2>Item 5</h2>
          <p>Here is short text</p>
        </div>
        <div class="item">
          <h2>Item 6</h2>
          <p>Here is short text</p>
        </div>
  </div>
  <div class="row">
        <div class="item">
         <h2>Item 7</h2>
          <p>Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. . Here is Longer text. Here is Longer text. Here is Longer text. Here i . Here is Longer text. Here is Longer text. Here is Longer text. Here i . Here is Longer text. Here is Longer text. Here is Longer text. Here i . Here is Longer text. Here is Longer text. Here is Longer text. Here i . Here is Longer text. Here is Longer text. Here is Longer text. Here i . Here is Longer text. Here is Longer text. Here is Longer text. Here i . Here is Longer text. Here is Longer text.  Here is Longer text.WW</p>
        </div>
        <div class="item">
          <h2>Item 8</h2>
          <p>Here is short text</p>
        </div>
   </div>
  </div>
  </body>
  </html>

使项目的高度相等，并使用CSS指定它们所在的列？

3 个答案: