如何将div的内容与底部对齐？
kri*_*tof 1098 html css vertical-alignment
说我有以下CSS和HTML代码:
#header {
height: 150px;
}<div id="header">
<h1>Header title</h1>
Header content (one or multiple lines)
</div>标题部分是固定高度,但标题内容可能会更改.我想将标题的内容垂直对齐到标题部分的底部,因此最后一行文本"粘贴"到标题部分的底部.
因此,如果只有一行文字,那就像:
-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------
如果有三行:
-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------
怎么能在CSS中完成？
cle*_*tus 1257
相对+绝对定位是您最好的选择:
#header {
position: relative;
min-height: 150px;
}
#header-content {
position: absolute;
bottom: 0;
left: 0;
}
#header, #header * {
background: rgba(40, 40, 100, 0.25);
}<div id="header">
<h1>Title</h1>
<div id="header-content">Some content</div>
</div>但是你可能会遇到问题.当我尝试它时,出现在内容下方的下拉菜单出现问题.它只是不漂亮.
老实说,对于垂直居中问题,以及项目的任何垂直对齐问题都不是固定高度,使用表格更容易.
- 您可以使用z-index属性管理您的下拉列表位置,以将其置于最前面.请记住,z-index属性适用于相对或绝对定位的元素.另外,从语义上讲,使用表来实现布局结果是不正确的. (14认同)
- 我实际上在问这里之前找到了解决方案,但不知何故忘了添加位置:relative; 标题div和内容保持着陆在页面底部.谢谢 (4认同)
- 不要将表用于非表格数据!相反,使用CSS显示属性`display:table-cell`,或`table-row`或`table`.您再也不需要使用表格进行纯布局. (2认同)
Pat*_*ney 149
使用CSS定位.
/* Creates a new stacking context on the header */
#header {
position: relative;
}
/* Positions header-content at the bottom of header's context */
#header-content {
position: absolute;
bottom: 0;
}
正如克莱特斯所说,你需要确定标题内容才能使其发挥作用.
<span id="header-content">some header content</span>
<div style="height:100%; position:relative;">
<div style="height:10%; position:absolute; bottom:0px;">bottom</div>
</div>
- fyi ...这导致我的标题内容崩溃其宽度,所以我不得不在标题内容上添加`width ='100%'` (4认同)
- @dsdsdsdsd你也可以通过将display:block添加到#header-content来解决这个问题. (2认同)
小智 111
我使用这些属性,它的工作原理!
#header {
display: table-cell;
vertical-align: bottom;
}
- IE8及更早版本不支持.IE9支持它. (42认同)
- @cale_b根据[caniuse.com](http://caniuse.com/#search=table-cell),****在IE8中工作. (22认同)
- @ZachL Happenstance - 我正在为企业客户支持IE8中的遗留应用程序,这实际上是__工作. (5认同)
- @fguillen:刚刚在Chrome(v31)中测试过.也在那里工作. (4认同)
- `table-cell`打破了很多东西.就像Bootstrap网格系统一样.`col-md-12`不再给你一个100%宽的div. (4认同)
Lee*_*ine 106
如果您不担心旧版浏览器,请使用flexbox.
父元素需要将其显示类型设置为flex
div.parent {
display: flex;
height: 100%;
}
然后将子元素的align-self设置为flex-end.
span.child {
display: inline-block;
align-self: flex-end;
}
这是我以前学习的资源:http: //css-tricks.com/snippets/css/a-guide-to-flexbox/
- 在 2020 年，这应该是正确的答案：https://caniuse.com/#feat=flexbox (7认同)
- 我无法让它工作...... http://codepen.io/anon/pen/rgldC?editors=110 (2认同)
- 我认为这是比相对绝对更好的答案，它更灵活 (2认同)
Gre*_*ent 62
经过一段时间的努力,我终于找到了满足我所有要求的解决方案:
- 不要求我知道容器的高度.
- 与相对+绝对解决方案不同,内容不会在其自己的层中浮动(即,它通常嵌入在容器div中).
- 适用于各种浏览器(IE8 +).
- 易于实施.
解决方案只需要一个<div>,我称之为"对齐器":
CSS
.bottom_aligner {
display: inline-block;
height: 100%;
vertical-align: bottom;
width: 0px;
}
HTML
<div class="bottom_aligner"></div>
... Your content here ...
这个技巧的工作原理是创建一个高大的瘦小的div,它将文本基线推到容器的底部.
这是一个完整的例子,可以实现OP的要求.我将"bottom_aligner"设为厚实和红色仅用于演示目的.
CSS:
.outer-container {
border: 2px solid black;
height: 175px;
width: 300px;
}
.top-section {
background: lightgreen;
height: 50%;
}
.bottom-section {
background: lightblue;
height: 50%;
margin: 8px;
}
.bottom-aligner {
display: inline-block;
height: 100%;
vertical-align: bottom;
width: 3px;
background: red;
}
.bottom-content {
display: inline-block;
}
.top-content {
padding: 8px;
}
HTML:
<body>
<div class="outer-container">
<div class="top-section">
This text
<br> is on top.
</div>
<div class="bottom-section">
<div class="bottom-aligner"></div>
<div class="bottom-content">
I like it here
<br> at the bottom.
</div>
</div>
</div>
</body>
- 如果放入`:: before`规则,这也可以工作,这样就不需要额外的元素了.我们最后使用了flex,但是当你不能的时候这很有用. (2认同)
Sti*_*ers 34
现代的方法是使用flexbox.请参阅下面的示例.您甚至不需要包装Some text...到任何HTML标记中,因为直接包含在Flex容器中的文本包装在匿名的flex项中.
header {
border: 1px solid blue;
height: 150px;
display: flex; /* defines flexbox */
flex-direction: column; /* top to bottom */
justify-content: space-between; /* first item at start, last at end */
}
h1 {
margin: 0;
}<header>
<h1>Header title</h1>
Some text aligns to the bottom
</header>如果只有一些文本,并且您希望垂直对齐容器的底部.
section {
border: 1px solid blue;
height: 150px;
display: flex; /* defines flexbox */
align-items: flex-end; /* bottom of the box */
}<section>Some text aligns to the bottom</section>- 我需要我的底部对齐元素仍然存在于文档流中，这在使用“ position：absolute;”时是不可能的。此解决方案非常适合我的情况！ (2认同)
Mai*_*rey 32
我已经多次遇到过这个问题，有很好的解决方案，但也有不太好的解决方案。因此，您可以使用 Flexbox、网格系统或显示表格以不同的方式实现这一点。我更喜欢的变体是 flex 和“margin-bottom: auto”的混合。这是我个人收集的文本底部可能性：
\n1. Flex / margin-top：自动；
\n\r\n
\r\n\n\r\n
\r\n.parent {\n min-height: 200px; \n background: green;\n display: flex; \n} \n\n.child { \n margin-top: auto;\n background: red;\n padding:5px;\n color:white;\n}<div class="parent">\n <div class="child">Bottom text</div> \n</div>2. Flex/align-self：flex-end
\n\r\n
\r\n\n\r\n
\r\n.parent {\n display: flex;\n min-height: 200px; \n background: green;\n}\n\n.child {\n align-self: flex-end;\n background: red;\n padding: 5px;\n color: white;\n}<div class="parent">\n <div class="child">Bottom text</div> \n</div>3. Flex/align-items：flex-end；
\n\r\n
\r\n\n\r\n
\r\n.parent {\n min-height: 200px; \n background: green;\n display: flex; \n align-items: flex-end; \n} \n\n.child { \n padding: 5px;\n background: red;\n color: white; \n}<div class="parent">\n <div class="child">Bottom text</div> \n</div>4. 网格/align-self:结束；
\n\r\n
\r\n\n\r\n
\r\n.parent {\n min-height: 200px; \n background: green; \n display: grid; \n} \n\n.child { \n align-self: end;\n background: red;\n padding:5px;\n color:white; \n}<div class="parent">\n <div class="child">Bottom text</div> \n</div>5.表格/垂直对齐：底部；
\n我个人不喜欢这种表方法。
\n\r\n
\r\n\n\r\n
\r\n.parent {\n min-height: 200px; \n background: green; \n display: table;\n width:100%;\n} \n\n.child {\n display: table-cell;\n vertical-align: bottom;\n background: red;\n padding:5px;\n color:white; \n}<div class="parent">\n <div class="child">Bottom text</div> \n</div>带垫片
\n6. 弯曲；/ 弹性：1；
\n\r\n
\r\n\n\r\n
\r\n.parent {\n min-height: 200px; \n background: green; \n display: flex;\n flex-flow: column;\n} \n\n.spacer {\n flex: 1; \n}\n.child {\n padding: 5px;\n background: red;\n color: white;\n}<div class="parent"> \n <div class="spacer"></div>\n <div class="child">Bottom text</div> \n</div>7. 弹性/弹性增长：1；
\n\r\n
\r\n\n\r\n
\r\n.parent {\n min-height: 200px; \n background: green; \n display: flex;\n flex-direction: column;\n} \n\n.spacer {\n flex-grow: 1;\n}\n\n.child { \n padding: 5px;\n background: red;\n color: white;\n}<div class="parent"> \n <div class="spacer"></div>\n <div class="child">Bottom text</div> \n</div>8. 内联块/PseudoClass::before
\n\r\n
\r\n\n\r\n
\r\n.parent {\n min-height: 200px; \n background: green; \n}\n\n.child::before {\n display:inline-block;\n content:\'\';\n height: 100%;\n vertical-align:bottom; \n}\n\n.child { \n height:200px;\n padding: 5px;\n background: red;\n color: white; \n \n}<div class="parent">\n <div class="child">Bottom text</div> \n</div>\xe2\x9d\xa4\xef\xb8\x8f 我个人首选的版本是：1.、2.和3.
\nuse*_*247 24
display: flex;
align-items: flex-end;
- @AnthonyB - 定义旧？我们必须改变这个记录作为开发人员.技术向前发展,旧的根本无法生存.从我看到的IE9和10有flex的问题,但它们分别在2011年和2012年发布......它是2017年.我们不得不放弃这些过时和破损的浏览器.如果不是为了视觉上的满足,而是为了安全性和一般软件更新. (10认同)
- 请注意,在旧版浏览器中,flexbox不受[支持](http://caniuse.com/#feat=flexbox). (2认同)
- @Tisch你是绝对正确的,作为开发人员,我们必须使用体面和近期的技术.但我只是警告这个兼容性问题,以免引起惊讶. (2认同)
小智 23
如果父/块元素的行高大于内联元素的行高,则内联块或内联块元素可以与块级元素的底部对齐.*
标记:
<h1 class="alignBtm"><span>I'm at the bottom</span></h1>
CSS:
h1.alignBtm {
line-height: 3em;
}
h1.alignBtm span {
line-height: 1.2em;
vertical-align: bottom;
}
*确保您处于标准模式
Tem*_*fif 10
这是使用 flexbox 但不使用flex-end进行底部对齐的另一种解决方案。我们的想法是一套margin-bottom关于H1到自动推剩余内容的底部：
#header {
height: 350px;
display:flex;
flex-direction:column;
border:1px solid;
}
#header h1 {
margin-bottom:auto;
}<div id="header">
<h1>Header title</h1>
Header content (one or multiple lines) Header content (one or multiple lines)Header content (one or multiple lines) Header content (one or multiple lines)
</div>我们也可以margin-top:auto对文本做同样的事情，但在这种情况下，我们需要将它包裹在 a divor 中span：
#header {
height: 350px;
display:flex;
flex-direction:column;
border:1px solid;
}
#header span {
margin-top:auto;
}<div id="header">
<h1>Header title</h1>
<span>Header content (one or multiple lines)</span>
</div>你可以简单地实现flex
header {
border: 1px solid blue;
height: 150px;
display: flex; /* defines flexbox */
flex-direction: column; /* top to bottom */
justify-content: space-between; /* first item at start, last at end */
}
h1 {
margin: 0;
}<header>
<h1>Header title</h1>
Some text aligns to the bottom
</header>将 div 移动到底部的最佳解决方案如下。基本上，您需要做的是将 display flex 和 flex-direction 设置为父级的列，并向其子级添加“margin-top: auto”，该子级需要浮动到容器的底部注意：我已经使用过bootstrap 及其类。
.box-wrapper {
height: 400px;
border: 1px solid #000;
margin: 20px;
display: flex; // added for representation purpose only. Bootstrap default class is already added
flex-direction: column;
}
.link-02 {
margin-top: auto;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="box-wrapper d-flex flex-column col-4">
<div>incidunt blanditiis debitis</div>
<div class="news-box">
<img class="d-block" alt="non ipsam nihil" src="https://via.placeholder.com/150">
<p>Labore consectetur doloribus qui ab et qui aut facere quos.</p>
</div>
<a href="https://oscar.com" target="_blank" class="link-02">
This is moved to bottom with minimal effort
</a>
</div>您可以使用以下方法：
.header-parent {
height: 150px;
display: grid;
}
.header-content {
align-self: end;
}<div class="header-parent">
<h1>Header title</h1>
<div class="header-content">
Header content
</div>
</div>If you have multiple, dynamic height items, use the CSS display values of table and table-cell:
HTML
<html>
<body>
<div class="valign bottom">
<div>
<div>my bottom aligned div 1</div>
<div>my bottom aligned div 2</div>
<div>my bottom aligned div 3</div>
</div>
</div>
</body>
</html>
CSS
html,
body {
width: 100%;
height: 100%;
}
.valign {
display: table;
width: 100%;
height: 100%;
}
.valign > div {
display: table-cell;
width: 100%;
height: 100%;
}
.valign.bottom > div {
vertical-align: bottom;
}
I've created a JSBin demo here: http://jsbin.com/INOnAkuF/2/edit
The demo also has an example how to vertically center align using the same technique.
你不需要绝对+相对。非常有可能使用容器和数据的相对位置。这就是你如何做到的。
假设您的数据的高度将是x. 您的容器是相对的，而页脚也是相对的。您所要做的就是添加到您的数据中
bottom: -webkit-calc(-100% + x);
您的数据将始终位于容器的底部。即使您有具有动态高度的容器也能工作。
HTML 会是这样
<div class="container">
<div class="data"></div>
</div>
CSS 会是这样
.container{
height:400px;
width:600px;
border:1px solid red;
margin-top:50px;
margin-left:50px;
display:block;
}
.data{
width:100%;
height:40px;
position:relative;
float:left;
border:1px solid blue;
bottom: -webkit-calc(-100% + 40px);
bottom:calc(-100% + 40px);
}
希望这可以帮助。
这是一种灵活的方法。当然，IE8 不支持，因为 7 年前用户需要。根据您需要支持的内容，其中一些可以取消。
尽管如此，如果有一种方法可以在没有外部容器的情况下做到这一点，那就太好了，只需让文本在它自己的内部对齐即可。
#header {
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 150px;
}
一个非常简单的单行解决方案是将 line-heigth 添加到 div，记住所有 div 的文本都将放在底部。
CSS：
#layer{width:198px;
height:48px;
line-height:72px;
border:1px #000 solid}
#layer a{text-decoration:none;}
HTML：
<div id="layer">
<a href="#">text at div's bottom.</a>
</div>
请记住，这是一个实用且快速的解决方案，当您只希望 div 中的文本下降时，如果您需要组合图像和内容，则必须编写更复杂和响应性更强的 CSS
所有这些答案都对我不起作用......我不是 flexbox 专家，但这很容易弄清楚，它简单易懂且易于使用。要将某些内容与其余内容分开，请插入一个空的 div 并让它增长以填充空间。
https://jsfiddle.net/8sfeLmgd/1/
.myContainer {
display: flex;
height: 250px;
flex-flow: column;
}
.filler {
flex: 1 1;
}
<div class="myContainer">
<div>Top</div>
<div class="filler"></div>
<div>Bottom</div>
</div>
当底部内容的大小不固定时，当容器的大小不固定时，这也会按预期反应。
| 归档时间： |
|
| 查看次数： |
1876648 次 |
| 最近记录： |