我想将我的div放在另一个div的底部

Question

我对div的位置有疑问。我想将div“列表按钮”放在主div“列表”的底部。我希望该位置不会随上面文本的大小而变化。实际上位置取决于文本，所以这不是我想要的

Example from application

.list {
  border: 1px solid grey;
  display: flex;
  margin: 30px;
  height: 230px;
  border-radius: 10px;
  box-shadow: 1px 1px 12px #555;
}

.list-img {
  width: 20%;
}

img {
  width: 100%;
  height: 100%;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.list-content {
  width: 100%;
  margin-left: 20px;
  margin-right: 20px;
}

.list-title {
  border-bottom: 1px solid grey;
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
}

.list-button {
  border: 3px solid blue;
  display: flex;
  justify-content: center;
}

<div class="list">
    <div class="list-img" *ngIf="moviePoster; else notFound">
        <img src="https://image.tmdb.org/t/p/w200/{{moviePoster}}" alt="...">

    </div>
    <ng-template #notFound>
        <div class="list-img">
            <img src="../../assets/not_found.jpg" alt="...">
        </div>

    </ng-template>

    <div class="list-content">
        <div class="list-title">
            <h4>{{movieTitle}}</h4>
            <h5>{{movieVote}}</h5>
        </div>
        <div class="list-date">
            <p>
                {{movieDate | date: 'dd MMMM, y' }}
            </p>
        </div>
        <div *ngIf="movieText; else loremBlock">
            <p>{{movieText | slice:0:300 }}...</p>
        </div>
        <div>
            <ng-template #loremBlock>
                <p>Oups, overview not found !</p>
            </ng-template>
        </div>
        <div class="list-button">
            <button type="button" class="btn btn-primary">Add</button>
        </div>
    </div>

谢谢您的帮助。

Answer 1

您可以使用position: absolute;至.list-button和position: relative;至.list将文本放置在.list容器的底部。

.list {
  ...
  position: relative;
}

.list-button {
  position: absolute;
  bottom: 0;
  left: 20%;
  width: calc(100% - 20% - 20px);
  ...
}

.list {
  border: 1px solid grey;
  display: flex;
  margin: 30px;
  height: 230px;
  border-radius: 10px;
  box-shadow: 1px 1px 12px #555;
  position: relative;
}

.list-img {
  width: 20%;
}

img {
  width: 100%;
  height: 100%;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.list-content {
  width: 100%;
  margin-left: 20px;
  margin-right: 20px;
}

.list-title {
  border-bottom: 1px solid grey;
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
}

.list-button {
  position: absolute;
  bottom: 0;
  left: 20%;
  width: calc(100% - 20% - 20px);
  border: 3px solid blue;
  display: flex;
  justify-content: center;
}

<div class="list">
    <div class="list-img" *ngIf="moviePoster; else notFound">
        <img src="https://picsum.photos/id/500/200/230" alt="...">

    </div>
    <ng-template #notFound>
        <div class="list-img">
            <img src="../../assets/not_found.jpg" alt="...">
        </div>

    </ng-template>

    <div class="list-content">
        <div class="list-title">
            <h4>{{movieTitle}}</h4>
            <h5>{{movieVote}}</h5>
        </div>
        <div class="list-date">
            <p>
                {{movieDate | date: 'dd MMMM, y' }}
            </p>
        </div>
        <div *ngIf="movieText; else loremBlock">
            <p>{{movieText | slice:0:300 }}...</p>
        </div>
        <div>
            <ng-template #loremBlock>
                <p>Oups, overview not found !</p>
            </ng-template>
        </div>
        <div class="list-button">
            <button type="button" class="btn btn-primary">Add</button>
        </div>
    </div>

Answer 2

您可以通过为align-self: end;应用属性justify-self: end;或.list-button来实现。

为此，父元素必须具有display: flex;属性。