Question

我有theese 3 div，其中包含一些内容，并且无论文本有多长，我都必须将链接（标有红色）放在一行上。他们总是必须呆在同一条线上。

flexbox的使用是强制性的 flex-end属性似乎没有帮助

.tl {
  m-w: 1200px;
  display: flex;
  color: #000;
  margin-top: 70px;
  justify-content: space-evenly;
  padding-left: 18px;
  /* padding-top: 30px; */
}

.tile {
  text-align: left;
  padding-left: 40px;
  margin-top: 0px;
  padding-top: 0px;
  width: 100%;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.plus {
  align-self: flex-end;
}

<div class="tiles">
  <div class="container tl">
    <div class="tile chart">
      <h3>SEO Optimized</h3>
      <p>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 galand scrambled it to make</p>
      <a href="#" class="plus">+</a>
    </div>
    <div class="tile pad">
      <h3>SEO Optimized</h3>
      <p>Lorem Ipsum is simply dummy text of the printing adustry's standard dummy text ever since the 1500s, xt ext ever since the 1500s,ver since the 1500s,when an unknown printer took a galley of type and scrambled it to makemy text ever since the 1500</p>
    </div>
    <div class="tile cloud">
      <h3>SEO Optimized</h3>
      <p>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</p>
      <a href="#" class="plus"></a>
    </div>
  </div>

Answer 1

您不能对齐不共享父元素的元素，但是您可以要做的就是将每个“加号”推到每个图块的底部。

只需将margin-top: auto;应用于“加”元素。

由于所有图块的高度相同，因此“加号”项将对齐。

.tl {
  width: 80%;
  margin: auto;
  display: flex;
  color: #000;
  margin-top: 70px;
  justify-content: space-evenly;
  padding-left: 18px;
  /* padding-top: 30px; */
}

.tile {
  text-align: left;
  padding: 5px;
  margin-top: 0px;
  padding-top: 0px;
  width: 100%;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  border: 1px solid green;
}

.plus {
  align-self: flex-end;
  padding: 1em;
  background: red;
  margin-top: auto;
}

<div class="tiles">
  <div class="container tl">
    <div class="tile chart">
      <h3>SEO Optimized</h3>
      <p>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 galand scrambled it to make</p>
      <a href="#" class="plus">+</a>
    </div>
    <div class="tile pad">
      <h3>SEO Optimized</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa animi ea commodi autem aspernatur dolores aliquam vel illo, voluptatum magni aperiam quibusdam blanditiis cum laboriosam earum, exercitationem rerum. Error, deleniti sequi quod repellendus
        ducimus excepturi inventore aliquam impedit doloribus reprehenderit beatae obcaecati voluptates voluptas, ut fuga dignissimos culpa? Explicabo aperiam expedita nulla unde sed asperiores nostrum iure reiciendis qui aliquam id doloribus vel officiis
        modi iusto mollitia, eum at, libero et dolore facilis suscipit dicta aspernatur corporis?</p><a href="#" class="plus">+</a>
    </div>
    <div class="tile cloud">
      <h3>SEO Optimized</h3>
      <p>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</p>
      <a href="#" class="plus">+</a></div>
  </div>

Answer 2

在flex: 1标记中添加p进行描述应该可以解决问题。这样一来，说明就会占用容器内的所有可用空间，从而将加号一直推到底部。

.tl{
     m-w:1200px;
     display: flex;
     color: #000;
     margin-top: 70px;
     justify-content: space-evenly;
     padding-left: 18px;
   /* padding-top: 30px; */
}
.tile{
    text-align: left;
    padding-left: 40px;
    margin-top: 0px;
    padding-top: 0px;
    width: 100%;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
}
.tile p {
    flex: 1
 }
.plus{
    align-self: flex-end;
}

<div class="tiles">
<div class="container tl">
  <div class="tile chart">
    <h3>SEO Optimized</h3>
    <p>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 galand scrambled it to make</p>
    <a href="#" class="plus">+</a>
  </div>
  <div class="tile chart">
    <h3>SEO Optimized</h3>
    <p>Lorem Ipsum is simply duesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galand scrambled it to make</p>
    <a href="#" class="plus">+</a>
  </div>
  <div class="tile chart">
    <h3>SEO Optimized</h3>
    <p>Lorem Ipsum is simply dummy tee 1500s, when an unknown printer took a galand scrambled it to make</p>
    <a href="#" class="plus">+</a>
  </div>
</div>

不论内容如何，都将项目放在一行上

2 个答案:

不论内容如何，​​都将项目放在一行上

2 个答案:

不论内容如何，都将项目放在一行上