时间戳

首页 > 解决方案 > 带有flexbox的div底部的定位按钮

html - 带有flexbox的div底部的定位按钮

问题描述

我的页面上有一系列并排放置的 div。我已经使用 flexbox 对它们进行了定位。在每个盒子里面我都有一个按钮，我想把它放在盒子的底部。我看过与我类似的其他问题，但这些解决方案都没有奏效。我试过添加

p {
  margin: 0
}

.movie_list_button {
    margin-top: auto;
}

但这无济于事。我也试过p { flex-grow: 1; }了，但也没有用。我不确定我错过了什么。

这是我的 HTML：

  <div class="movie_group">
    <div class="movie_list">
        <ul>
        <li>
          <p><b>Box 1 text 1</b></p>
          <p>Box 1 text 2. No matter how large this text is, I want the button to stick to the bottom of the box</p>
          <div class="movie_list_button">
            <button>Button</button>
          </div>
          </li>
        </ul> 
    </div>
    
    <div class="movie_list">
        <ul>
        <li>
          <p><b>Box 2 text 1</b></p>
          <p>Box 2 text 2. No matter how large this text is, I want the button to stick to the bottom of the box</p>
          <div class="movie_list_button">
            <button>Button</button>
          </div>
         </li> 
        </ul> 
    </div>
  </div>

CSS：

.movie_group {
    margin-top: 120px;
    display: flex;
    flex-wrap: wrap;
}

.movie_list {
    list-style: none;
    padding: 10px;
    flex-basis: 30%;
    border: 1px solid black;
    height: 300px;
   /*  display: flex;
    flex-direction: column; */
}

p {
  margin: 0;
  /* flex-grow: 1; */
}

.movie_list_button {
    background-color: white;
    margin-top: auto;
}

这是一个 JSFiddle：https ://jsfiddle.net/4pbzfct3/64/

标签： htmlcssflexbox

解决方案

你可以通过给它的父 div “position: relative” 和按钮周围的 div “position: absolute” 来将你的按钮从你的 flexbox 的“流”中取出。从那里，您可以使用顶部、右侧、左侧和底部来移动按钮，相对于其父元素。我将在下面发布的内容将按钮放在左下角，但您可以将其移动到任何您喜欢的地方。如果您愿意，您还可以使用负值将其移出其父级。

.movie_group {
  margin-top: 120px;
  display: flex;
  flex-wrap: wrap;
}

.movie_list {
  list-style: none;
  padding: 10px;
  flex-basis: 30%;
  border: 1px solid black;
  height: 300px;
  **position: relative;**
  /*  display: flex;
    flex-direction: column; */
}

p {
  margin: 0;
  /* flex-grow: 1; */
}

.movie_list_button {
  background-color: white;
  margin-top: auto;
  **position: absolute;
  left: 10px;
  bottom: 10px;**
}

如果您不喜欢使用绝对位置和相对位置来移动按钮的想法，您还可以在 flexbox 中创建一个 flexbox 来定位您的按钮。这将需要您更改 HTML。最终，从长远来看，这会更好，因为它已经是伪响应了。

您将按钮 div 移到 ul 之外，然后将另一个 div 放在 ul 周围。因此，您的新 movie_list 弹性框中将有两个“弹性项目”。然后，您将“flex-direction: column”添加回您的 .movi​​e_list 类。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="movie_group">
      <div class="movie_list">
        <div class="inner-flex">
          <ul>
            <li>
              <p><b>Box 1 text 1</b></p>
              <p>
                Box 1 text 2. No matter how large this text is, I want the
                button to stick to the bottom of the box
              </p>
            </li>
          </ul>
        </div>
        <div class="movie_list_button">
          <button>Button</button>
        </div>
      </div>

      <div class="movie_list">
        <div class="inner-flex">
          <ul>
            <li>
              <p><b>Box 2 text 1</b></p>
              <p>
                Box 2 text 2. No matter how large this text is, I want the
                button to stick to the bottom of the box
              </p>
            </li>
          </ul>
        </div>
        <div class="movie_list_button">
          <button>Button</button>
        </div>
      </div>
    </div>
  </body>
</html>

.movie_group {
  margin-top: 120px;
  display: flex;
  flex-wrap: wrap;
}

.movie_list {
  list-style: none;
  padding: 10px;
  flex-basis: 30%;
  border: 1px solid black;
  height: 300px;
  display: flex;
  flex-direction: column;
}

p {
  margin: 0;
  /* flex-grow: 1; */
}

.inner-flex {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.movie_list_button {
  background-color: white;
  margin-top: auto;
}

推荐阅读