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

Question

我对 div 的职位有疑问。我想把我的 div "list-button" 放在主 div "list" 的底部。而且我希望位置不会随着上面文字的大小而改变。实际上位置取决于文本，所以这不是我想要的

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

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

为此，要求父元素具有 display: flex; 属性.

Answer 2

您可以使用 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>

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

I want to put my div in bottom of another div

html

css

position