以下代码生成一组蓝框,在其中两个框中显示一个小白框。如何将这些白色盒子贴在蓝色盒子的底部?我尝试将margin-top: auto;
添加到.test
,但这不起作用。
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
flex-wrap: wrap;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
.test {
background-color: white;
width: 20px;
height: 20px;
margin-bottom: 0 auto;
}
<div class="flex-container">
<div class="flex-item">flex item 1flex item 1flex item 1flex item 1flex
item 1<div class="test"></div></div>
<div class="flex-item">flex item 2<div class="test"></div></div>
<div class="flex-item">flex item 3</div>
<div class="flex-item">flex item 3</div>
<div class="flex-item">flex item 3</div>
</div>
答案 0 :(得分:0)
只需编辑您的CSS并将// Call on a random style ID to display in rating window.
$resultSet = $conn->query("SELECT pictureID,userID FROM styles ORDER BY RAND() LIMIT 1");
while($rows = $resultSet->fetch_assoc() ){
$rateableUserID = $rows['userID'];
$rateablePictureID = $rows['pictureID'];
}
添加到&#39; flex-item,
和position: relative
到&#39;测试&#39;。
当然,您必须添加position: absolute
才能将其发送到底部
bottom: 0px
答案 1 :(得分:0)
将position: absolute;
和bottom: 0;
添加到.test
多维数据集(您还可以添加left: 0
,但这仍然是默认值),并position: relative;
到其容器让他们成为孩子绝对地位的“锚”。
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
flex-wrap: wrap;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
position: relative;;
}
.test {
background-color: white;
width: 20px;
height: 20px;
position: absolute;
bottom: 0;
}
<div class="flex-container">
<div class="flex-item">flex item 1flex item 1flex item 1flex item 1flex item 1
<div class="test"></div>
</div>
<div class="flex-item">flex item 2
<div class="test"></div>
</div>
<div class="flex-item">flex item 3</div>
<div class="flex-item">flex item 3</div>
<div class="flex-item">flex item 3</div>
</div>
评论后的补充:
在评论中说出其他问题:
您可以使用flex-direction: column
将弹性项目定义为弹性容器,并将margin-top: auto
应用于.test
。但是,您需要将height
flex-item
更改为min-height
才能允许其展开:
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
flex-wrap: wrap;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
min-height: 100px;
margin: 10px;
display: flex;
flex-direction: column;
}
.test {
background-color: white;
width: 20px;
height: 50px;
margin-top: auto;
}
<div class="flex-container">
<div class="flex-item">flex item 1flex item 1flex item 1flex item 1flex item 1
<div class="test"></div>
</div>
<div class="flex-item">flex item 2
<div class="test"></div>
</div>
<div class="flex-item">flex item 3</div>
<div class="flex-item">flex item 3</div>
<div class="flex-item">flex item 3</div>
</div>
答案 2 :(得分:0)
margin
如果父级也是一个弹性框 (同样如果margin-x有一个值)
此处: margin:auto 0 0;
应该这样做。
(margin:auto 0 0 auto ;
会将其设置在右下角)
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
flex-wrap: wrap;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
display: -webkit-flex;
display: flex;
flex-direction:column;
}
.test {
background-color: white;
width: 20px;
height: 20px;
margin-top:auto;
margin-bottom: 0;
}
&#13;
<div class="flex-container">
<div class="flex-item">flex item 1flex item 1flex item 1flex item 1flex
item 1<div class="test"></div></div>
<div class="flex-item">flex item 2<div class="test"></div></div>
<div class="flex-item">flex item 3</div>
<div class="flex-item">flex item 3</div>
<div class="flex-item">flex item 3</div>
</div>
&#13;
答案 3 :(得分:0)
您可以直接在弹性儿童身上使用align-self
。
.container {
display: flex;
}
.place-at-bottom {
align-self: flex-end;
}
/* ignore them */
.container {
width: 200px;
height: 200px;
background: yellow;
}
.place-at-bottom {
width: 50px;
height: 50px;
background: cyan;
border: 1px solid black;
}
<div class="container">
<div class="place-at-bottom"></div>
</div>