我有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
我都希望.button
始终将其始终停留在底部,而不会将其从流程中移出。我听说这可以通过Flexbox实现,但我无法使其正常工作。
您可以使用自动边距
在通过justify-content
和对齐之前align-self
,任何正的自由空间都会分配给该维度中的自动边距。
因此,您可以使用以下一种(或两种):
p { margin-bottom: auto; } /* Push following elements to the bottom */
a { margin-top: auto; } /* Push it and following elements to the bottom */
.content {
height: 200px;
border: 1px solid;
display: flex;
flex-direction: column;
}
h1, h2 {
margin: 0;
}
a {
margin-top: auto;
}
<div class="content">
<h1>heading 1</h1>
<h2>heading 2</h2>
<p>Some text more or less</p>
<a href="/" class="button">Click me</a>
</div>
或者,您可以在a
增长之前使元素填充可用空间:
p { flex-grow: 1; } /* Grow to fill available space */
.content {
height: 200px;
border: 1px solid;
display: flex;
flex-direction: column;
}
h1, h2 {
margin: 0;
}
p {
flex-grow: 1;
}
<div class="content">
<h1>heading 1</h1>
<h2>heading 2</h2>
<p>Some text more or less</p>
<a href="/" class="button">Click me</a>
</div>
我与一些孩子有: 我想要以下布局: 无论中有多少文本,我都希望将始终贴在底部,而不将其从流中取出。我听说Flexbox可以实现这一点,但我不能让它工作。
问题内容: 我正在使用flexbox对齐我的子元素。我想做的是将一个元素居中,而另一个保持最左对齐。通常我会使用来设置left元素。问题是将中心元素推离中心。这是可能的 ,而不 使用绝对定位? HTML和CSS 问题答案: 编辑: 请参阅下面的[Solo答案,这是更好的解决方案。 flexbox背后的想法是提供一个框架,可以轻松地将容器中尺寸可变的元素对齐。这样,提供一个布局而完全忽略一个元素的宽
问题内容: 我有应该根据内容动态更改高度的容器。对于给定行中的所有容器,无论每个容器的内容如何,底部文本都应固定在底部。 我认为与一起使用可以将其推到最低点,但似乎没有任何作用。 问题答案: 您需要使父级成为flex容器: 然后,告诉元素填充可用高度:
问题内容: 我想有A B和C中间对齐。 我如何才能D完全右移? 问题答案: 以下是实现此布局的五个选项: CSS定位 带有不可见DOM元素的Flexbox 带有不可见伪元素的Flexbox Flexbox与 flex: 1 CSS网格布局 方法1:CSS定位属性 应用于容器。 应用于项目D。 现在,此项目已完全放置在flex容器中。 更具体地说,项目D从文档流中删除,但停留在最接近的祖先的范围内。
我试图将容器中的三个div中的一个进行底部对齐,但遇到了一些问题。 正如您将看到的,如果我尝试在
问题内容: 我尝试将我的文本与其他文章和答案中的div底部对齐,以了解Stack Overflow中的其他问题,并学会了使用不同的CSS属性来处理此问题。但是我做不到。基本上我的HTML代码是这样的: 效果是,在FF中,我仅获得垂直线(div处于折叠状态),并将文本写在其旁边。如何防止折叠但宽度适合文本? 问题答案: 弹性解决方案 如果您想使用该解决方案,那将是非常好的。但是,除了破解之外,我们还