html - 将表单元素与弹性框单元的底部对齐,但将文本保持在顶部
问题描述
我对此很陌生,但我正在尝试整理一个比我的薪酬等级略高的页面,而且它似乎运行良好,但我似乎无法弄清楚如何获得“输入”留在弹性框的底部,并将文本和图像保持在顶部。我觉得这是一个等级制度或父/子问题,但我似乎无法理解它。到目前为止,我已经尝试了所有我知道的方法,但是这就是我现在所处的位置......
我已经创建了一个单独的“DIV ID”,它有自己的一组输入规则,规定输入)应该:“align-self:flex-end;” 仍然无法正常工作..任何想法将不胜感激!
body {
background-color: #faf8ed;
}
.header {
background-color: black;
padding: 21px;
border-radius: 25px;
}
img {
max-width: 100%;
flex-wrap: wrap;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
display: block;
}
h1 {
font-family: 'Modak', cursive;
font-variant: small-caps;
letter-spacing: 2px;
text-align: center;
font-weight: normal;
}
p {
font-family: 'Amatic SC', cursive;
font-weight: bold;
font-size: 16px;
}
#container1 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
height: 100%;
align-items: stretch;
padding-top: 37px;
}
#one {
border: 1px solid beige;
font-family: Arial;
font-size: .75em;
padding: 10px;
width: 200px;
margin-left: 7px;
margin-right: 7px;
margin-top: 7px;
margin-bottom: 7px;
border-radius: 25px;
background-color: beige;
}
#bottom {
display: flex;
align-self: flex-end;
}
.zoom {
transition: transform .3s;
/* Animation */
margin: 0 auto;
}
#quantity {
display: flex;
font-family: Arial;
font-size: 1.5em;
font-family: 'Amatic SC', cursive;
font-weight: bold;
text-align: center;
padding-right: 3px;
}
#buy {
display: flex;
font-family: Arial;
font-size: 1.5em;
font-family: 'Amatic SC', cursive;
font-weight: bold;
border-radius: 7px;
}
<div id="container1">
<div id="one" class="zoom">
<h1>KING GIZZARD ROCKS!</h1>
<img src="tshirt_2.jpg">
<p>
This is the text for this shirt!
</p>
<form action="">
<div id="bottom">
<label for="quantity" id="quantity">Quantity:</label>
<input type="number" name="quantity" min="1" max="30" placeholder="0">
<br>
<input type="submit" id="buy" value="BUY">
</div><!--bottom-->
</form>
</div><!--one-->
<div> <!--container-->
解决方案
align-self: flex-end
如果父级是 flex 容器(即父级有display: flex
or display: inline-flex
),则可以工作。但在这种情况下,父 ( form
) 不是 flex 容器,因此子级将忽略 flex 属性。
Flex 属性仅在父元素和子元素之间起作用。在此处阅读有关 flex 布局范围的更多信息:嵌套 flex 容器时正确使用 flex 属性
在不更改 HTML 的情况下(可以提高效率),您可以通过使#one
元素成为列方向的 flex 容器并将自动边距应用于表单元素来实现所需的布局。
在下面的示例中,我还删除了许多不必要的代码(至少出于演示目的)。
#container1 {
display: flex;
/* flex-direction: row; */
/* flex-wrap: wrap; */
justify-content: center;
height: 100vh; /* adjustment */
/* align-items: stretch; */
/* padding-top: 37px; */
}
/* .header {
background-color: black;
padding: 21px;
border-radius: 25px;
} */
#one {
/* border: 1px solid beige; */
font-family: Arial;
font-size: .75em;
padding: 10px;
width: 200px;
/* margin-left: 7px; */
/* margin-right: 7px; */
/* margin-top: 7px; */
/* margin-bottom: 7px; */
/* border-radius: 25px; */
background-color: beige;
display: flex; /* new */
flex-direction: column; /* new */
}
img {
max-width: 100%;
/* flex-wrap: wrap; */
/* margin-left: auto; */
/* margin-right: auto; */
/* margin-top: auto; */
/* margin-bottom: auto; */
/* display: block; */
}
h1 {
font-family: 'Modak', cursive;
font-variant: small-caps;
letter-spacing: 2px;
text-align: center;
font-weight: normal;
margin-top: 0; /* new */
}
p {
font-family: 'Amatic SC', cursive;
font-weight: bold;
font-size: 16px;
}
form {
margin-top: auto; /* new */
}
#bottom {
display: flex;
/* align-self: flex-end; */
}
.zoom {
transition: transform .3s;
/* Animation */
margin: 0 auto;
}
#quantity {
display: flex;
font-family: Arial;
font-size: 1.5em;
font-family: 'Amatic SC', cursive;
font-weight: bold;
text-align: center;
padding-right: 3px;
}
#buy {
display: flex;
font-family: Arial;
font-size: 1.5em;
font-family: 'Amatic SC', cursive;
font-weight: bold;
border-radius: 7px;
}
body {
background-color: #faf8ed;
margin: 0; /* new */
}
* {
box-sizing: border-box;
}
<div id="container1">
<div id="one" class="zoom">
<h1>KING GIZZARD ROCKS!</h1>
<img src="http://i.imgur.com/60PVLis.png">
<p>This is the text for this shirt!</p>
<form action="">
<div id="bottom">
<label for="quantity" id="quantity">Quantity:</label>
<input type="number" name="quantity" min="1" max="30" placeholder="0">
<br>
<input type="submit" id="buy" value="BUY">
</div><!--bottom-->
</form>
</div><!--one-->
<div><!--container-->
推荐阅读
- python - 在机器/深度学习上运行代码时出错
- javascript - jQuery :hover 选择器在 Edge 和 Firefox 中无法正常工作
- informix - 通过 Powershell 安装 Informix ODBC 驱动程序
- apache - 正则表达式:仅当 url 中的 /x 之后有内容时如何匹配
- python-3.x - 此代码的非列表理解版本将如何?
- dart - 为什么 dart 类型系统在使用 () => String 而不是 () => void 时不会抱怨?
- tags - vTestStudio:如何在图中设置 partialPathName?
- android - 片段观察问题
- php - PHP如何处理具有无限量参数的URL
- laravel - 如何在数据表 Laravel 上添加具有权限的按钮