三行代码  ›  专栏  ›  技术社区  ›  Hunter

将内部div与项目底部对齐

  •  0
  • Hunter  · 技术社区  · 1 月前

    使用我以前的问题和当前设置中的示例,当 body

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                *{
                    margin: 0;
                    padding: 0;
                    box-sizing: border-box;
                }
                .home-section {
                    display: flex;
                    border: 3px solid black;
                    height:100vh;
                    flex-flow: column;
                    max-height: 99vh;
                }
    
                .container {
                    flex: 1;
                    border: 3px solid red;
                    display: flex;
                    flex-direction: column;
                    height: fit-content;
                    max-height: 99vh;
                    overflow: auto;
                }
    
                #listItems {
                    border: 3px solid green;
                    height: 99vh;
                    overflow-y: auto;
                }
    
                #listItems > ul {
                    display: flex;
                    flex-flow: row wrap;
                    list-style: none;
                }
    
                .item {
                    border: 3px solid purple;
                    width: 200px;
                    margin-left: 4px;
                }
            </style>
        </head>
        <body>
            <div class="home-section">
                <div class="home-content">
                    <div class="container">
                        <form>
                            <label for="example">Input</label>
                            <input type="text" name="example">
                        </form>
                        <div id="listItems">
                            <ul>
                                <li class="item">
                                    <div class="body">
                                        <p>Stuff here...............................................</p>
                                    </div>
                                    <div class="footer">
                                        <button>Click</button>
                                    </div>
                                </li>
                                <li class="item">
                                    <div class="body">
                                        <p>Stuff here</p>
                                    </div>
                                    <div class="footer">
                                        <button>Click</button>
                                    </div>
                                </li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </body>
    </html>
    2 回复  |  直到 1 月前
        1
  •  1
  •   Helping Hands    1 月前

    希望对你有用!!!

    .item {display: flex; flex-direction: column;}
    .item .body {display: flex; flex:1;}
    

    *{
                    margin: 0;
                    padding: 0;
                    box-sizing: border-box;
                }
                .home-section {
                    display: flex;
                    border: 3px solid black;
                    height:100vh;
                    flex-flow: column;
                    max-height: 99vh;
                }
    
                .container {
                    flex: 1;
                    border: 3px solid red;
                    display: flex;
                    flex-direction: column;
                    height: fit-content;
                    max-height: 99vh;
                    overflow: auto;
                }
    
                #listItems {
                    border: 3px solid green;
                    height: 99vh;
                    overflow-y: auto;
                }
    
                #listItems > ul {
                    display: flex;
                    flex-flow: row wrap;
                    list-style: none;
                }
    
                .item {
                    border: 3px solid purple;
                    width: 200px;
                    margin-left: 4px;
                    display: flex;
                    flex-direction: column;
                }
                .item .body {
                    display: flex;
                    flex: 1;
                }
    <div class="home-section">
                <div class="home-content">
                    <div class="container">
                        <form>
                            <label for="example">Input</label>
                            <input type="text" name="example">
                        </form>
                        <div id="listItems">
                            <ul>
                                <li class="item">
                                    <div class="body">
                                        <p>Stuff here...............................................</p>
                                    </div>
                                    <div class="footer">
                                        <button>Click</button>
                                    </div>
                                </li>
                                <li class="item">
                                    <div class="body">
                                        <p>Stuff here</p>
                                    </div>
                                    <div class="footer">
                                        <button>Click</button>
                                    </div>
                                </li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                                <li class="item">Item</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        2
  •  0
  •   Ahmad Habib    1 月前

    你可以用 position: absolute bottom: 0 并给予 position: relative .item

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    .home-section {
      display: flex;
      border: 3px solid black;
      height: 100vh;
      flex-flow: column;
      max-height: 99vh;
    }
    
    .container {
      flex: 1;
      border: 3px solid red;
      display: flex;
      flex-direction: column;
      height: fit-content;
      max-height: 99vh;
      overflow: auto;
    }
    
    #listItems {
      border: 3px solid green;
      height: 99vh;
      overflow-y: auto;
    }
    
    #listItems>ul {
      display: flex;
      flex-flow: row wrap;
      list-style: none;
    }
    
    .item {
      border: 3px solid purple;
      width: 200px;
      margin-left: 4px;
      position: relative;
    }
    
    .footer {
      position: absolute;
      bottom: 0;
    }
    <div class="home-section">
      <div class="home-content">
        <div class="container">
          <form>
            <label for="example">Input</label>
            <input type="text" name="example">
          </form>
          <div id="listItems">
            <ul>
              <li class="item">
                <div class="body">
                  <p>Stuff here...............................................</p>
                </div>
                <div class="footer">
                  <button>Click</button>
                </div>
              </li>
              <li class="item">
                <div class="body">
                  <p>Stuff here</p>
                </div>
                <div class="footer">
                  <button>Click</button>
                </div>
              </li>
              <li class="item">Item</li>
              <li class="item">Item</li>
              <li class="item">Item</li>
              <li class="item">Item</li>
              <li class="item">Item</li>
              <li class="item">Item</li>
              <li class="item">Item</li>
              <li class="item">Item</li>
              <li class="item">Item</li>
              <li class="item">Item</li>
              <li class="item">Item</li>
              <li class="item">Item</li>
              <li class="item">Item</li>
              <li class="item">Item</li>
              <li class="item">Item</li>
              <li class="item">Item</li>
              <li class="item">Item</li>
              <li class="item">Item</li>
              <li class="item">Item</li>
              <li class="item">Item</li>
              <li class="item">Item</li>
              <li class="item">Item</li>
              <li class="item">Item</li>
              <li class="item">Item</li>
              <li class="item">Item</li>
              <li class="item">Item</li>
              <li class="item">Item</li>
              <li class="item">Item</li>
              <li class="item">Item</li>
              <li class="item">Item</li>
              <li class="item">Item</li>
              <li class="item">Item</li>
              <li class="item">Item</li>
              <li class="item">Item</li>
              <li class="item">Item</li>
              <li class="item">Item</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    Fiddle