主页 / 问题 / 674659
Accepted
Byulent
Asked:2020-06-03 16:04:56 +0000 UTC2020-06-03 16:04:56 +0000 UTC

如何进行此文本对齐？

  • 772

它看起来像这样：

在此处输入图像描述

也就是说，如果标题很短，则文本“用户添加”会与图像底部对齐。但是随着标题变长，文本开始有点脱落。

如何实施？我尝试将带有标题的文本包裹在一个块中，并将文本设置为绝对定位，但这样行不通。

html

1 个回答

  1. Best Answer

    设置标题的最小高度。

    没有代码示例，我可以提供此选项：

    （.item:after不需要，为清楚起见添加）

    *, ::after, ::before {
  box-sizing:border-box;
}
.item{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  border:1px solid #aaa;
  margin:0 0 1rem;
}
.item:after{
  content:'минимальная высота заголовка';
  position:absolute;
  top:0;
  left:0;
  right:0;
  background:#000;
  color:red;
  opacity:.3;
  padding:2rem;
  height:6rem;
  text-align:center;
}
.info{
  display: flex;
  flex-direction: column;
  flex:0 0 50%;
  max-width:50%;
  padding:1rem;
}
.photo{
  display: flex;
  align-items: center;
	align-content: center;
  justify-content: center;
  flex:0 0 50%;
  max-width:50%;
  padding:1rem;
  color:#fff;
  text-align:center;
  background:orange;
}
.caption{
  flex: 1;
  text-transform: uppercase;
  font-size:1.2rem;
  font-weight:bold;
  min-height:6rem;
}
.link{
  color:blue;
  text-decoration:undeline;
}
    <div class="item">
  <div class="info">
    <div class="caption">заголовок</div>
    <div class="link">ссылка</div>
  </div>
  <div class="photo">фото</div>
</div>

<div class="item">
  <div class="info">
    <div class="caption">длинный <br>заголовок</div>
    <div class="link">ссылка</div>
  </div>
  <div class="photo">фото</div>
</div>

<div class="item">
  <div class="info">
    <div class="caption">очень <br>длинный <br>заголовок</div>
    <div class="link">ссылка</div>
  </div>
  <div class="photo">фото</div>
</div>

<div class="item">
  <div class="info">
    <div class="caption">очень <br>очень <br>очень <br>длинный <br>заголовок</div>
    <div class="link">ссылка</div>
  </div>
  <div class="photo">фото</div>
</div>

    • 2

相关问题