把div放在父div的底部

Question

我正在努力解决这个问题：

我想在另一个div的底部放一个div（我的代码中为红色）。

div应该粘在父div的底部。

＆＃13;

＆＃13;

public class Q1 {
    public static String numLetters(String s){
        String end = new String();
        int counter = 0;
        char c,d;
        for(int i=0; i<s.length();i++){
            c = s.charAt(i);
            for(int j=0; j<s.length();j++){
                d = s.charAt(j);
                if(c == d){
                    counter++;
                }
            }
            end = end + counter+c;
            counter = 0;
        }

        return end;
    }

＆＃13;

    .homepage-wrapper{ 
        max-width: 1028px;
        margin-left: auto;
        margin-right: auto; 
        }
    .homepage-top-category-container-title{
        background-color: black;
        margin-bottom: 10px;
        padding: 15px 0 15px 0;
        }
    #homepage-top-category-container-title{
        color: orange;
        }
    .homepage-top-category-container-list{
        display: flex;
        flex-wrap:wrap;
        width: auto;
        height: auto;
        background-color: yellow; 
        }
    .homepage-top-category-container-item{
        display: block;
        float: none;
        width: auto;
        height:auto;
        border: solid 1px black;
    }
    #homepage-top-category-container-item-a{
    	width: 240px;
    	height: 360px;
    	}
    #homepage-top-category-container-item-b{
    	margin-left: 20px;
    	width: 240px;
    	height: 360px;
    	}
    #homepage-top-category-container-item-c{
    	margin-left: 20px;
    	width: 240px;
    	height: 360px;
    	}
    #homepage-top-category-container-item-d{
    	margin-left: 20px;
    	width: 240px;
    	height: 360px;
    	}
    .test{
    	position:relative;
    	bottom:0;
    	background-color: red;
    	}

＆＃13;

＆＃13;

＆＃13;

我将感谢社区的任何帮助。 感谢。

Answer 1

只需将父母的位置设为亲戚，将儿童的位置设为绝对。 https://jsfiddle.net/yak613/d43eytfb/

.homepage-wrapper{ 
    max-width: 1028px;
    margin-left: auto;
    margin-right: auto; 
    }
.homepage-top-category-container-title{
    background-color: black;
    margin-bottom: 10px;
    padding: 15px 0 15px 0;
    }
#homepage-top-category-container-title{
    color: orange;
    }
.homepage-top-category-container-list{
    display: flex;
    flex-wrap:wrap;
    width: auto;
    height: auto;
    background-color: yellow; 
    }
.homepage-top-category-container-item{
    display: block;
    float: none;
    width: auto;
    height:auto;
    border: solid 1px black;
    position: relative;

}
#homepage-top-category-container-item-a{
    width: 240px;
    height: 360px;
    }
#homepage-top-category-container-item-b{
    margin-left: 20px;
    width: 240px;
    height: 360px;
    }
#homepage-top-category-container-item-c{
    margin-left: 20px;
    width: 240px;
    height: 360px;
    }
#homepage-top-category-container-item-d{
    margin-left: 20px;
    width: 240px;
    height: 360px;
    }
.test{
    position:absolute;
    left: 0;
    right: 0;

    bottom:0;
    background-color: red;
    }

Answer 2

将元素粘贴到其父元素的底部

#elem{
   position: absolute:
   bottom: 0;
}

但如果它是一个页脚，你必须设置父高度，所以转到结束屏幕。

Answer 3

如果你使用了flex，那么请再次使用它并将margin添加到button以简化：

＆＃13;

＆＃13;

.homepage-wrapper{ 
        max-width: 1028px;
        margin-left: auto;
        margin-right: auto; 
        }
    .homepage-top-category-container-title{
        background-color: black;
        margin-bottom: 10px;
        padding: 15px 0 15px 0;
        }
    #homepage-top-category-container-title{
        color: orange;
        }
    .homepage-top-category-container-list{
        display: flex;
        flex-wrap:wrap;
        width: auto;
        height: auto;
        background-color: yellow; 
        }
    .homepage-top-category-container-item{
        display: block;
        float: none;
        width: auto;
        height:auto;
        border: solid 1px black;
    }
    #homepage-top-category-container-item-a{
    	width: 240px;
    	height: 360px;
      display:flex;/* added */
      flex-flow:column;/* added */
    	}
    #homepage-top-category-container-item-b{
    	margin-left: 20px;
    	width: 240px;
    	height: 360px;
    	}
    #homepage-top-category-container-item-c{
    	margin-left: 20px;
    	width: 240px;
    	height: 360px;
    	}
    #homepage-top-category-container-item-d{
    	margin-left: 20px;
    	width: 240px;
    	height: 360px;
    	}
    .test{
      margin-top:auto;/* added */
      margin-bottom:0;/* added */
        background-color: red;
    	}

＆＃13;

<div class="homepage-wrapper">
        <div class="homepage-top-category-container">
            <div class="homepage-top-category-container-title">
                <span id="homepage-top-category-container-title">Most popular aisles</span>
            </div>
            <div class="homepage-top-category-container-list">
                
                <div class="homepage-top-category-container-item" id="homepage-top-category-container-item-a">
                    block A
                  <p>paragraph</p>
                    <div class="test">
    					button
                    </div>               
                </div> 
                <div class="homepage-top-category-container-item" id="homepage-top-category-container-item-b">
    				block B
                </div>
                <div class="homepage-top-category-container-item" id="homepage-top-category-container-item-c">
    				block C
                </div>
                <div class="homepage-top-category-container-item" id="homepage-top-category-container-item-d">
    				block D
               </div>
            
            </div>
        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

所以我的想法是将margin-top:auto设置为按钮以将其一直向下推，其他方面可以有任何价值。

如果您为所有4个边设置auto，那么它将位于空白区域的中间（下面的代码段中的演示）。

＆＃13;

＆＃13;

.homepage-wrapper{ 
        max-width: 1028px;
        margin-left: auto;
        margin-right: auto; 
        }
    .homepage-top-category-container-title{
        background-color: black;
        margin-bottom: 10px;
        padding: 15px 0 15px 0;
        }
    #homepage-top-category-container-title{
        color: orange;
        }
    .homepage-top-category-container-list{
        display: flex;
        flex-wrap:wrap;
        width: auto;
        height: auto;
        background-color: yellow; 
        }
    .homepage-top-category-container-item{
        display: block;
        float: none;
        width: auto;
        height:auto;
        border: solid 1px black;
    }
    #homepage-top-category-container-item-a{
    	width: 240px;
    	height: 360px;
      display:flex;/* added */
      flex-flow:column;/* added */
    	}
    #homepage-top-category-container-item-b{
    	margin-left: 20px;
    	width: 240px;
    	height: 360px;
    	}
    #homepage-top-category-container-item-c{
    	margin-left: 20px;
    	width: 240px;
    	height: 360px;
    	}
    #homepage-top-category-container-item-d{
    	margin-left: 20px;
    	width: 240px;
    	height: 360px;
    	}
    .test{
      margin:auto;/* added */
        background-color: red;
    	}

＆＃13;

<div class="homepage-wrapper">
        <div class="homepage-top-category-container">
            <div class="homepage-top-category-container-title">
                <span id="homepage-top-category-container-title">Most popular aisles</span>
            </div>
            <div class="homepage-top-category-container-list">
                
                <div class="homepage-top-category-container-item" id="homepage-top-category-container-item-a">
                    block A
                  <p>paragraph</p>
                    <div class="test">
    					button
                    </div>               
                </div> 
                <div class="homepage-top-category-container-item" id="homepage-top-category-container-item-b">
    				block B
                </div>
                <div class="homepage-top-category-container-item" id="homepage-top-category-container-item-c">
    				block C
                </div>
                <div class="homepage-top-category-container-item" id="homepage-top-category-container-item-d">
    				block D
               </div>
            
            </div>
        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;