Question

我正在设置html卡。它们都必须具有相同的高度，但不仅如此，我还需要卡片中的标题具有相同的高度，因此无论标题长度如何，描述都始终从同一点开始。这是一个有问题的codepen链接：

{
      box-sizing: border-box;
    }
    body {
      background-color: #f5f5f5;
      margin: 0 auto; 
      max-width: 60em;
      line-height: 1.3;
    }
    ul, li {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    img {
      width: 100%;
    }
    h2 {
      margin-top: 0;
      margin-bottom: 0.4em;
    }

    /*Flex items*/
    .list {
      display: flex;
      flex-wrap: wrap;
    }
    .list-item {
    	display: flex; 
      padding: 0.5em;
    	width: 100%;
    }
    @media all and (min-width: 40em) {
      .list-item {
        width: 50%;
      }
    }
    @media all and (min-width: 60em) {
      .list-item {
        width: 33.33%;
      }
    }
    .list-content {
    	background-color: #fff;
      display: flex;
      flex-direction: column;
      padding: 1em;
    	width: 100%;
    }
    .list-content p {
    	flex: 1 0 auto;
    }

<li class="list-item">
        <div class="list-content">
          <h2>This title is way longer than the rest, yet I need the rest to be the same height so the paragraph starts at the same point</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet.</p>
          <a href="">Link</a>
        </div>
      </li>

         <li class="list-item">
        <div class="list-content">
          <h2>Title</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.</p>
          <a href="">Link</a>
        </div>
      </li>

      <li class="list-item">
        <div class="list-content">
          <h2>Title</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium.</p>
          <a href="">Link</a>
        </div>
      </li>
    </ul>

Answer 1

var maxheight=0;
$("h2").each(function(){
	if($(this).height()>maxheight){
		maxheight=$(this).height();
	}
})
$("h2").height(maxheight);

* {
  box-sizing: border-box;
}
body {
  background-color: #f5f5f5;
  margin: 0 auto; 
  max-width: 60em;
  line-height: 1.3;
}
ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}
img {
  width: 100%;
}
h2 {
  margin-top: 0;
	overflow:hidden;
  margin-bottom: 0.4em;
}

/*Flex items*/
.list {
  display: flex;
  flex-wrap: wrap;
}
.list-item {
	display: flex; 
  padding: 0.5em;
	width: 100%;
}
@media all and (min-width: 40em) {
  .list-item {
    width: 50%;
  }
}
@media all and (min-width: 60em) {
  .list-item {
    width: 33.33%;
  }
}
.list-content {
	background-color: #fff;
  display: flex;
  flex-direction: column;
  padding: 1em;
	width: 100%;
}
.list-content p {
	flex: 1 0 auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list">
  <li class="list-item">
    <div class="list-content">
      <h2>This title is way longer than the rest, yet I need the rest to be the same height so the paragraph starts at the same point</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet.</p>
      <a href="">Link</a>
    </div>
  </li>
	
	 <li class="list-item">
    <div class="list-content">
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.</p>
      <a href="">Link</a>
    </div>
  </li>
  
  <li class="list-item">
    <div class="list-content">
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium.</p>
      <a href="">Link</a>
    </div>
  </li>
</ul>

这将始终取h2的最大高度并将其应用于所有其他h2元素！因此所有文字描述都将从同一级别开始！

Answer 2

您可以使用flex的第三个参数来控制它，例如，在flex: 0 0 60%元素上使用h2。

请注意，您可能需要调整元素的高度以适应这种情况。

* {
  box-sizing: border-box;
}

body {
  background-color: #f5f5f5;
  margin: 0 auto;
  max-width: 60em;
  line-height: 1.3;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  width: 100%;
}

h2 {
  margin-top: 0;
  margin-bottom: 0.4em;
  flex: 0 0 60%;
}


/*Flex items*/

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

.list-item {
  display: flex;
  padding: 0.5em;
  width: 100%;
}

@media all and (min-width: 40em) {
  .list-item {
    width: 50%;
  }
}

@media all and (min-width: 60em) {
  .list-item {
    width: 33.33%;
  }
  h2 {
    
  }
}

.list-content {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  padding: 1em;
  width: 100%;
}

.list-content p {
  flex: 1 0 auto;
}

<li class="list-item">
  <div class="list-content">
    <h2>This title is way longer than the rest, yet I need the rest to be the same height so the paragraph starts at the same point</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet.</p>
    <a href="">Link</a>
  </div>
</li>

<li class="list-item">
  <div class="list-content">
    <h2>Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.</p>
    <a href="">Link</a>
  </div>
</li>

<li class="list-item">
  <div class="list-content">
    <h2>Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium.</p>
    <a href="">Link</a>
  </div>
</li>

Answer 3

标题应始终简短。更新您的设计，请您的内容作者对其进行更新。如果仅关注对齐方式，则可以尝试跟随，但标题不会完全显示。

h2{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

高度相同的flex div中的标题

3 个答案: