如何在主 div 内部的底部制作 div?

Question

如何使用类框链接=主框中的底部=类=主框？

我的想法

此类主宽度1200px; 此类主盒是 5 格，每个格宽 25%

.main-box {
width= "25%";
float= left;
}

<div class= "main">
<div class="main-box">
<div class="boxImg"></div>
<div class="boxTital"></div>
<div class="boxLinks">
<button> PRESS </button>
</div>
</div>
</div>

我想要这个div 框链接在最后一个div，

Answer 1

您可以使用flexbox来完成工作。 您必须将主框设置为flex. 然后boxLinks变成flex element，因此使用属性align-self您可以将其放在底部。

你可以找到一个关于css技巧的好教程

.main-box {
width: "25%";
float: left;
border: 1px solid #000;
width: 500px;
height: 400px;
display: flex;
}
.boxLinks {
flex: 0 1 100%;
height: 100px; 
background: #000;
align-self: flex-end;/* this do the work */
}

<div class="main">
<div class="main-box">
<div class="boxImg"></div>
<div class="boxTital"></div>
<div class="boxLinks">
<button> PRESS </button>
</div>
</div>
</div>

Answer 2

试试这个：

.main-box {
width= 25%;
float= left;
position:relative;
min-height:150px;
background:#000;
}
.boxLinks{
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
}

<div class= "main">
<div class="main-box">
<div class="boxImg"></div>
<div class="boxTital"></div>
<div class="boxLinks">
<button> PRESS </button>
</div>
</div>
</div>

Answer 3

这很简单。您可以在"主框"和position: absolute上使用position: relative，bottom:0在"boxLinks"上使用。

jsFiddle上的工作示例。

.main {
display: flex;
}
.main-box {
width: 25%;
height: 100px;
float: left;
position: relative;
background-color: #f00;
}
.boxLinks {
position: absolute;
bottom: 0;
left: 0;
padding: 10px;
background-color: #0f0;
}

<div class="main">
<div class="main-box">
<div class="boxImg"></div>
<div class="boxTital"></div>
<div class="boxLinks">
<button> PRESS </button>
</div>
</div>
</div>