Question

我正在尝试将“答案就是你”的文字放在页面底部，目前有效。

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

链接到fiddel 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列。

嵌套儿童＆＃39;部分inside your li needs to be a flex-container with flex-direction：column`。

.columns部分刚刚给出display:flex（每个孩子都是flex:1），这样孩子就可以达到顶级身高。

一旦我们实现了这一点，我们就可以使用margin-top:auto将最后一段（答案文本）推到其列的底部。

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

JSFiddle Demo

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

1 个答案: