我怎么才能把按钮直接放在第一栏的第一段下面呢?我知道这是因为第二段太长了,但我想避免差距.

由于我想让按钮最后在移动(所有堆叠),我不是我真的可以在HTML中移动它.

.text {
    max-width: 600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: "a b" "c b";
    /* grid-auto-rows: minmax(min-content, max-content); this doesn't work either */
    column-gap: 24px;
}
p:nth-of-type(1) {
    grid-area: "a";
}
p:nth-of-type(2) {
    grid-area: "b";
}
.button {
    grid-area: "c";
    display: inline-flex;
    margin-right: auto;
    justify-content: center;
    align-items: center;
    height: 40px;
    padding: 0 24px;
    text-decoration: none;
    color: white;
    background: gray;
    border-radius: 6px;
}
<div class="text">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore, porro mollitia. Tenetur quibusdam at voluptate aut expedita!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, est asperiores maxime id architecto libero commodi, corrupti sit iusto deserunt quos! Ipsa inventore soluta laudantium repellat culpa! Incidunt, quam eos.</p>
    <a href="#" class="button">Click me</a>
</div>

What I get now: enter image description here What I'd like instead: enter image description here

推荐答案

Here is a Mobile First design approach:

.text {
  max-width: 600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "a" "b" "c";
  column-gap: 24px;
}

p:nth-of-type(1) {
  grid-area: a;
}

p:nth-of-type(2) {
  grid-area: b;
}

.button {
  grid-area: c;
  display: inline-flex;
  margin-right: auto;
  justify-content: center;
  align-items: center;
  height: 40px;
  padding: 0 24px;
  text-decoration: none;
  color: white;
  background: gray;
  border-radius: 6px;
}


/* For non-mobile: */

@media (min-width: 500px) {
  .text {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: "a b" "c b";
  }
}
<div class="text">
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore, porro mollitia. Tenetur quibusdam at voluptate aut expedita!</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, est asperiores maxime id architecto libero commodi, corrupti sit iusto deserunt quos! Ipsa inventore soluta laudantium repellat culpa! Incidunt, quam eos.</p>
  <a href="#" class="button">Click me</a>
</div>

Video screen shot recording showing mobile vs desktop

Note:根据需要更改宽度.我专门为本例将其设置为500px,作为SO代码片段.

Css相关问答推荐

视频覆盖不适用于reactjs样式的组件

为什么继承时1rem值不同?

如何通过重复的网格区域来简化网格布局?

如何剪切一个正方形以便我可以绘制追逐边框?

为什么align-content:start应用于单行项目?

同时实现渐变文本和闪光文本效果是否可行?

更改行数时更改 CSS 网格列

当您到达页面底部时,如何使页脚 div 将附加的 div 向上推

如何在 flex-wrap 中优先考虑第一行?

如何在 Angular 中使用 CSS 设置 FontAwesome 图标的大小?

预期失败时使用toHaveStyle进行测试

在 RC.1 中,某些样式无法使用绑定语法添加

HTML/CSS 中的单选/复选框对齐

通过javascript删除或禁用浏览器的焦点边框

如何在浏览器的右下角放置一个div?

CSS过渡自动高度不起作用

Select 标签的占位符

在 CSS 中结合border-top、border-right、border-left、border-bottom

如何参加滚动事件?

仅使用 CSS 交换 DIV 位置