文本对齐底部的高效和响应方式

Question

我正在尝试将"the answer is thee"文本定位到页面底部，目前有效。

当我调整屏幕大小时出现问题，"big Text" 和 "answer Text" 不对齐，因为 "Big text" 元素是全高（取决于文本量）。我希望 "answer text" 不设置高度，而是根据内容区域的大小设置响应高度 "big text"

link 到小提琴 HERE

HTML

<head>
  <link href="https://get.gridsetapp.com/35679/" rel="stylesheet" />
</head>

<li class="aside-open-close active">
  <a class="aside-opener" href="#">Q1. Question here.</a>
  <div class="slide">
    <div class="columns">

      <div class="d1-d3">
        <p>one</p>
        <p>two</p>
        <p>three</p>
        <p class="answer-box">three - The answer is three</p>
      </div>

      <div class="d4-d6 grey-border">
        <p>big text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text
          herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig
          text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig
          text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig
          text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig
          text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig
          text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig
          text herebig text herebig text herebig text herebig text here</p>
      </div>

    </div>
  </div>
</li>

CSS

.aside-opener {
  font-size: 16px !important;
  font-weight: 600 !important;
}

.answer-box {
  display: flex;
  align-items: flex-end;
  /* width: 100%; */
  height: 290px;
}

.grey-border {
  border: 1px solid rgba(68, 68, 68, .54);
  margin-top: 15px;
}

.grey-border p {
  padding: 0 10px 0 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 19px;
}

下面的图片是正确的，但它有一个设定的高度，我需要高度响应或 100%

Answer 1

您需要嵌套的 flexbox 列。

嵌套 child '部分inside yourlineeds to be a flex-container withflex-direction:column`。

.columns 部分只是给出 display:flex （每个 child 是 flex:1）所以 children 是 queal 高度。

完成后，我们可以使用 margin-top:auto 将最后一段（答案文本）推到其列的底部。

* {
  margin: 0;
  padding: 0;
}
li {
  display: flex;
  flex-direction: column;
}
.slide {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.columns {
  flex: 1;
  display: flex;
}
.d1-d3 {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.aside-opener {
  font-size: 16px !important;
  font-weight: 600 !important;
  background: lightgrey;
}
.answer-box {
  margin-top: auto;
  text-align: right;
}
.grey-border {
  border: 1px solid rgba(68, 68, 68, .54);
  flex: 1;
}
.grey-border p {
  padding: 0 10px 0 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 19px;
}

<ul>
  <li class="aside-open-close active">
    <a class="aside-opener" href="#">Q1. Question here.</a>
    <div class="slide">
      <div class="columns">

        <div class="d1-d3">
          <p>one</p>
          <p>two</p>
          <p>three</p>
          <p class="answer-box">three - The answer is three</p>
        </div>

        <div class="d4-d6 grey-border">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur labore qui tenetur officia, hic illum fugit deleniti</p>
        </div>

      </div>
    </div>
  </li>
</ul>

JSFiddle Demo

文本对齐底部的高效和响应方式

efficient and responsive way of text alignment bottom

html

css

response

responsive-design