我和一些孩子有一个div:
<div class="content">
<h1>heading 1</h1>
<h2>heading 2</h2>
<p>Some more or less text</p>
<a href="/" class="button">Click me</a>
</div>
我想要下面的布局:
-------------------
|heading 1 |
|heading 2 |
|paragraph text |
|can have many |
|rows |
| |
| |
| |
|link-button |
-------------------
不管p中有多少文本，我希望始终将.按钮粘在底部，而不将其从流中取出。我听说这可以用Flexbox实现，但我不能让它工作。
当前回答
不确定是否适用于flexbox，但你可以使用position属性。
设置父div位置为相对 子元素可能是<p>或<h1>等。设置位置:绝对和底部:0。
例子:
index . html
<div class="parent">
<p>Child</p>
</div>
style.css
.parent {
background: gray;
width: 10%;
height: 100px;
position: relative;
}
p {
position: absolute;
bottom: 0;
}
这里是密码笔。
其他回答
试试这个
.content { 显示:flex; flex-direction:列; 身高:250 px; 宽度:200 px; 边界:固体; 自动换行:break-word; } .content h1， .content h2 { margin-bottom: 0 px; ｝ .content p { flex: 1; ｝ < div class = "内容" > <标题>标题1 < / h1 > < h2 >标题2 < / h2 > <p>一些或多或少的文本</p> <a href="/" class="button">点击我</a> < / div >
<div class="content">
<h1>heading 1</h1>
<h2>heading 2</h2>
<p>Some more or less text</p>
<a href="/" class="button">Click me</a>
</div>
CSS注意事项:
根据需要更改.content的高度 由于flex:1属性，按钮将占据底部的整个空白区域，使整个区域可单击。我建议将按钮包装在div或span中
CSS
.content {
display: flex;
flex-direction: column;
height: 100vh;
}
.button {
display: flex;
flex: 1;
align-items: flex-end;
}
https://codepen.io/alokjain_lucky/pen/MWooJGw
不确定是否适用于flexbox，但你可以使用position属性。
设置父div位置为相对 子元素可能是<p>或<h1>等。设置位置:绝对和底部:0。
例子:
index . html
<div class="parent">
<p>Child</p>
</div>
style.css
.parent {
background: gray;
width: 10%;
height: 100px;
position: relative;
}
p {
position: absolute;
bottom: 0;
}
这里是密码笔。
在将显示设置为flex时，只需使用flex属性标记哪些内容可以增长，哪些内容不能增长。
Flex财产
div.content { 身高:300 px; 显示:flex; flex-direction:列; ｝ div.up { flex: 1; ｝ div.down { flex:没有; ｝ < div class = "内容" > < div class = " " > <标题>标题1 < / h1 > < h2 >标题2 < / h2 > <p>一些或多或少的文本</p> < / div > < div class = "”> <a href="/" class="button">点击我</a> < / div > < / div >
align-self的解决方案:弯曲端;对我来说没用，但如果你想使用flex，这个是有用的:
结果
-------------------
|heading 1 |
|heading 2 |
|paragraph text |
| |
| |
| |
|link button |
-------------------
Code
注意:当“运行代码片段”时，你必须向下滚动才能看到底部的链接。
.content { display: flex; justify-content: space-between; flex-direction: column; height: 300px; } .content .upper { justify-content: normal; } /* Just to show container boundaries */ .content .upper, .content .bottom, .content .upper > * { border: 1px solid #ccc; } <div class="content"> <div class="upper"> <h1>heading 1</h1> <h2>heading 2</h2> <p>paragraph text</p> </div> <div class="bottom"> <a href="/" class="button">link button</a> </div> </div>
