將元素與居中的flexbox內的底角對齊-有解無憂

有點蛾子，但為了更好地說明我有這些元素（注意下一個鏈接位置不在角落里）：

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  
  min-height: 500px;
  width: 100%;
  height: 100%;
  padding: 2rem;
  
  background-image: url(https://lh3.googleusercontent.com/0cDOOJjp8pUGDDFLqHFITEi35uMGZ5wHpZ9KTKridxk71kpR9MfeydpQqG5n8Mvetvkg5iVuZGeL2xMvxgBY_UL-T9p0x_Eo4EAh);
  background-size: 80px 80px;
  background-position: bottom right;
  background-repeat: no-repeat;
}

.container a{
  align-self: flex-end;
}

<div class="container">
  <h1>Welcome</h1>
  <p>Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
  Lorem Ipsum<br>
  Lorem Ipsum
  <a href="/" class="button">Next</a>
</div>

我想以這種方式訂購它們：

---------------------
|                   |
|                   |
|                   |
|                   |
|                   |
|                   |
|      Welcome      |
|    Lorem Ipsum    |
|    Lorem Ipsum    |
|                   |
|                   |
|                   |
|                   |
|              Next | 
|                   | 
---------------------

這樣“下一個”元素就在角落上，與影像一樣接近，但保持邊距。歡迎使用任何 hacky 解決方案，但我更喜歡與任何 display 相關的解決方案，這就是我不依賴絕對定位的原因。

uj5u.com熱心網友回復：

怎么樣

<style>
        .container {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            
            min-height: 500px;
            width: 100%;
            height: 100%;
            padding: 2rem;
            
            background-image: url(https://lh3.googleusercontent.com/0cDOOJjp8pUGDDFLqHFITEi35uMGZ5wHpZ9KTKridxk71kpR9MfeydpQqG5n8Mvetvkg5iVuZGeL2xMvxgBY_UL-T9p0x_Eo4EAh);
            background-size: 80px 80px;
            background-position: bottom right;
            background-repeat: no-repeat;
         }

         .container-title{
             text-align: center;
         }

        .container-link{
            text-align: right;
        }
    </style>


<body>
    <div class="container">
        <div class="container-title">
            <h1>Welcome</h1>
            <p>Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
            Lorem Ipsum<br>
            Lorem Ipsum
        </div>
        <div class="container-link">
            <a href="/" class="button">Next</a>
        </div>
      </div>
</body>

uj5u.com熱心網友回復：

如果你需要的是定位Next按鈕，你的容器底部，只需添加margin-top: auto;到.container a您的CSS。這將確保按鈕始終位于容器底部。

但是，如果您還需要使容器中的內容垂直居中，請嘗試以下代碼段。

body{
  font-family: -apple-system, 
    BlinkMacSystemFont, 
    "Segoe UI", 
    Roboto, 
    Oxygen-Sans, 
    Ubuntu, 
    Cantarell, 
    "Helvetica Neue", 
    sans-serif;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 500px;
  max-width: 100%;
  margin: 50px auto;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.10);
  border-radius: 20px;
}
        
.item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 400px;
  width: auto;
  padding: 2rem;
  text-align: center;
}
        
.section__header {
  text-align: center;
}

.description{
  line-height: 1.5;
  font-weight: 300;
}

.footer {
  display: flex;
  justify-content: flex-end;
  padding: 0 2rem 2rem 2rem;  
}

    <section class="container">
      <div class="item">
        <h1 class="title">Welcome!</h1>
            <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>           
      </div>
      <div class="footer">
        <a href="#">Next</a>
      </div>
  </section>

uj5u.com熱心網友回復：

您可以使用，margin-top但您必須在鏈接和正文文本上都使用它，因此將文本放在自己的文本中div并進行排序。

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 500px;
  width: 100%;
  height: 100%;
  padding: 2rem;
  background-image: url(https://lh3.googleusercontent.com/0cDOOJjp8pUGDDFLqHFITEi35uMGZ5wHpZ9KTKridxk71kpR9MfeydpQqG5n8Mvetvkg5iVuZGeL2xMvxgBY_UL-T9p0x_Eo4EAh);
  background-size: 80px 80px;
  background-position: bottom right;
  background-repeat: no-repeat;
}

.container div {
  margin-top: auto;
}

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

<div class="container">
  <div>
    <h1>Welcome</h1>
    <p>Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
    Lorem Ipsum<br> Lorem Ipsum
  </div>
  <div class="link"><a href="/" class="button">Next</a></div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/328498.html

標籤：html css 弹性盒

上一篇：我想將兩個DIV堆疊在一起，并使一個透明，這樣您就可以看到它后面的div。使用CSS和HTML

下一篇：CSS：是否可以讓按鈕的框陰影的50%為一種顏色，而另外50%為另一種顏色？