Question

在我的CMS中，我有一行有4列。每列都有图片，标题，内容摘录（限制50个字），完成故事的日期和按钮链接。

图像，标题，摘录（如果故事少于50个单词）的大小不固定。我希望每个来自数据库的数据列的大小固定在底部的按钮和顶部的图像，并固定在列空间中扩展的大小空格。我尝试了很多方法（bulma，css grid）并没有得到完美的结果。 Tkx指南。

Answer 1

您可以尝试display: table和display: table-cell来执行此操作：

我的代码示例：

.container {
  display: table;
  width: 100%;
  border: 1px solid #bbb;
}

.block {
  display: table-cell;
  padding: 8px;
  border: 1px solid #bbb;
  width: 33%;
}

<div class="container">
  <div class="block">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <div class="block">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.
    <br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <div class="block">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  </div>
</div>

Answer 2

要实现您想要的功能，您可以使用新的Grid Layout，但是目前浏览器兼容性不是最佳的。使用Flex Box也可以达到你想要的效果。请参阅以下代码段：

＆＃13;

* {
  box-sizing: border-box;
}

.container {
  display: flex;
}

.col {
  width: 25%;
  display: flex;
}

article {
  margin: 10px;
  background: pink;
}

img {
  max-width: 100%;
}

＆＃13;

<div class="container">
	<div class="col">
    <article>
      <h1>
        Title of my post
      </h1>
      <img src="http://via.placeholder.com/350x150">
      <p>
        Some random text to fill in as the content of this article...
      </p>
    </article>
  </div>
  <div class="col">
    <article>
      <h1>
        Title of my post
      </h1>
      <img src="http://via.placeholder.com/350x150">
      <p>
        Some random text to fill in as the content of this article... Some random text to fill in as the content of this article.. .
      </p>
    </article>
  </div>
  <div class="col">
    <article>
      <h1>
        Title of my post
      </h1>
      <img src="http://via.placeholder.com/350x150">
      <p>
        Some random text to fill in as the content of this article.. .Some random text to fill in as the content of this article.. . Some random text to fill in as the content of this article.. .
      </p>
    </article>
  </div> 
  <div class="col">
    <article>
      <h1>
        Title of my post
      </h1>
      <img src="http://via.placeholder.com/350x150">
      <p>
        Some random text to fill in as the content of this article...
      </p>
    </article>
  </div>
</div>

＆＃13;

您的第三个选择是使用JavaScript，例如我为不支持flexbox的浏览器制作的以下Gist：Gist with usage example.

最后你可以使用display: table，但它不是很可靠，而且有点过时了。

Answer 3

我建议使用以下jquery插件： https://github.com/liabru/jquery-match-height

相同的列大小

3 个答案: