Question

今天，我面临着特殊的设计：一排卡片，卡片内的文字与其他卡片上的其他文字对齐。因此标题与其他卡片的标题对齐，文本与其他文本对齐。我很难清楚地解释它so I make a screenshot of the thing I'm trying to reach

由于纯css不可能实现，现在我准备完全忽略这个问题，但是谁知道，可能有解决方案吗？

更新：很抱歉，我没有解释。 Here is the code。我的目标是在不使用<br>和固定高度的情况下，与上述screeenshot中的对齐相同。

.list {
  display: flex;
}

.item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 120px;
  padding: 10px;
  background-color: #fff;
  border-radius: 10px;
  text-align: center;
  background-color: rebeccapurple;
  color: #fff;
}

.item>* {
  flex: 0 0 auto;
}

.item>*+* {
  margin-top: 10px;
}

.item+.item {
  margin-left: 20px;
}

.icon {
  background-color: red;
  border-radius: 100%;
  width: 20px;
  height: 20px;
}

.title {
  text-transform: uppercase;
  font-weight: bold;
}

.text {
  float: left;
  clear: left;
}

<div class="list">
  <div class="item">
    <div class="icon"></div>
    <div class="title">Lorem ipsum dolor sit amet.</div>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, amet.</div>
  </div>

  <div class="item">
    <div class="icon"></div>
    <div class="title">Lorem ipsum.</div>
    <div class="text">Lorem ipsum dolor sit amet</div>
  </div>

  <div class="item">
    <div class="icon"></div>
    <div class="title">Lorem ipsum dolor.</div>
    <div class="text">Lorem ipsum dolor sit amet</div>
  </div>

  <div class="item">
    <div class="icon"></div>
    <div class="title">Lorem ipsum dolor sit amet, consectetur.</div>
    <div class="text">Lorem ipsum dolor sit amet</div>
  </div>
</div>

谢谢。

Answer 1

您需要将标题div设置为固定高度，理想情况下应高于标题文本本身的高度。请参见下面的代码以获取标题div：

.title {
   text-transform: uppercase;
   font-weight: bold;
   height: 100px;
   max-width: 100%;
}

然后给您的文本div这种样式：

.text{
   display: flex;
   justify-content: center;
   align-items: top;
}

See this pen.

Answer 2

您可以使用CSS网格和一些HTML重组轻松地实现您想要做的事情。

另一种方法是为文本元素设置固定的高度。

如果您不熟悉CSS网格并且不喜欢为元素提供固定高度的想法，则可以通过使用一些JavaScript来获得类似的结果。检查随附的代码段。

我编写了一个小函数equalizeClass（）来使属于特定类的所有元素的高度相等。它所做的基本上是扫描属于特定类的所有元素，并找到具有最大高度的元素。然后将所有元素的高度设置为等于计算出的最大高度。

每次更新相关的DOM元素时，请不要忘记调用equalize（）。

我尚未更改您的HTML结构中的任何内容。

在CSS中，我刚刚将证明内容添加到您的项目类中。

justify-content: space-between;

function equalizeClass(className) {
  var images = document.getElementsByClassName(className);
  var max_height = 0;
  for (var i = 0; i < images.length; i++) {
    if (images[i].clientHeight > max_height) {
      max_height = images[i].clientHeight;
    }
  }
  for (var i = 0; i < images.length; i++) {
    images[i].style.height = max_height + 'px';
  }
}

function equalize() {
  equalizeClass("title");
  equalizeClass("text");
}

window.addEventListener("orientationchange", equalize());
window.addEventListener('resize', equalize());

.list {
  display: flex;
}

.item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 120px;
  padding: 10px;
  background-color: #fff;
  border-radius: 10px;
  text-align: center;
  background-color: rebeccapurple;
  color: #fff;
}

.item>* {
  flex: 0 0 auto;
}

.item>*+* {
  margin-top: 10px;
}

.item+.item {
  margin-left: 20px;
}

.icon {
  background-color: red;
  border-radius: 100%;
  width: 20px;
  height: 20px;
}

.title {
  text-transform: uppercase;
  font-weight: bold;
}

.text {
  float: left;
  clear: left;
}

<div class="list">
  <div class="item">
    <div class="icon"></div>
    <div class="title">Lorem ipsum dolor sit amet.</div>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, amet.</div>
  </div>

  <div class="item">
    <div class="icon"></div>
    <div class="title">Lorem ipsum.</div>
    <div class="text">Lorem ipsum dolor sit amet</div>
  </div>

  <div class="item">
    <div class="icon"></div>
    <div class="title">Lorem ipsum dolor.</8>
    </div>
    <div class="text">Lorem ipsum dolor sit amet</div>
  </div>

  <div class="item">
    <div class="icon"></div>
    <div class="title">Lorem ipsum dolor sit amet, consectetur.</div>
    <div class="text">Lorem ipsum dolor sit amet</div>
  </div>

</div>

将卡片内容与其他卡片内容对齐（照片）

2 个答案: