div下的嵌套按鈕

我正在嘗試將按鈕置于 div 下方...在編碼和完成課程方面非常新。理想情況下，按鈕會回應并跟隨 div，無論它們在哪里（我的代碼可能很亂，不確定，抱歉：P）有什么提示嗎？

.items {
  height:20rem;
  width:20rem;
  background-color:#7FDEFF;
  display:inline-block;
  margin:4em;
  display:center;
}

.items:hover {
  background-color: #9ce5ff;
}




    <section id="sale">
        <div class="items"></div>
        <button class="buy">Add to Cart</button>
        <div class="items"></div>
        <button class="buy">Add to Cart</button>
        <div class="items"></div>
        <button class="buy">Add to Cart</button>
    </section>



</body>

</html>

uj5u.com熱心網友回復：

檢查下面的 Html 和 Css。我想這就是你想要的？

#sale {
        display: flex;
        flex-wrap: wrap;
    }

    .column {
        margin-bottom: 1rem;
        padding: .5rem;
        flex: 0 0 25%;
    }

    .items {
        /* height: 20rem;
            width: 20rem; */
        background-color: #7FDEFF;
        padding: 5rem;
        /*remove 'padding: 5rem' when you add an image*/
        /* display: inline-block;
            margin: 4em;
            display: center; */
        margin-bottom: 1rem;
    }

    .items:hover {
        background-color: #9ce5ff;
    }

    <section id="sale">
        <div class="column">
            <div class="items"></div>
            <button class="buy">Add to Cart</button>
        </div>
        <div class="column">
            <div class="items"></div>
            <button class="buy">Add to Cart</button>
        </div>
        <div class="column">
            <div class="items"></div>
            <button class="buy">Add to Cart</button>
        </div>
    </section>

uj5u.com熱心網友回復：

您可以嘗試使用包裝器元素 (.content-wrapper) 來包裝每一個。您可以檢查下面的代碼。

.items {
  height:20rem;
  width:20rem;
  background-color:#7FDEFF;
  margin:4em;
}

.content-wrapper{
display:flex;
flex-direction:column;
width:20rem;
align-items:center;
}

   <section id="sale">
   <div class="content-wrapper">
        <div class="items"></div>
        <button class="buy">Add to Cart</button>
        </div>
        <div class="content-wrapper">
        <div class="items"></div>
       
        <button class="buy">Add to Cart</button>
        </div>
        <div class="content-wrapper">
        <div class="items"></div>
        <button class="buy">Add to Cart</button>
        </div>
    </section>

uj5u.com熱心網友回復：

你也可以不使用 flex 來做，見下文：

.column {
  text-align:center;
  margin-bottom: 1rem;
  padding: .5rem;
  width: 10rem;
}

.items {
  width: 100%;
  background-color: #7FDEFF;
  padding: 40px 0px;
  margin-bottom: 10px;
}

.items:hover {
  background-color: #9ce5ff;
}

    <section id="sale">
        <div class="column">
            <div class="items"></div>
            <button class="buy">Add to Cart</button>
        </div>
        <div class="column">
            <div class="items"></div>
            <button class="buy">Add to Cart</button>
        </div>
        <div class="column">
            <div class="items"></div>
            <button class="buy">Add to Cart</button>
        </div>
    </section>

重要的步驟是

• 在text-align: center父 div 中有
• width為父 div定義一個
• 將 child-div's 定義width為 100%（從而傳播到 parent-div's width）
• 為 child-div 提供兩個值padding。第一個 ( 40px) 確保 div 中有一些可見的垂直空間，第二個 ( 0px) 使它水平填充父 div。

標籤：html css

上一篇：awk函式不在html頁面上列印輸出

下一篇：Javascript回傳多個復選框值