Fatal编程技术网
  • html/
  • Html 如何将div的内容与底部对齐

Html 如何将div的内容与底部对齐

html css

Html 如何将div的内容与底部对齐,html,css,vertical-alignment,Html,Css,Vertical Alignment,假设我有以下CSS和HTML代码： #标题{ 高度：150像素； } 标题 标题内容（一行或多行） 使用CSS定位： /*在标题上创建新的堆叠上下文*/ #标题{ 位置：相对位置； } /*将标题内容放置在标题上下文的底部*/ #标题内容{ 位置：绝对位置； 底部：0； } 因此，您需要识别标题内容以使其起作用 某些标题内容 底部 相对+绝对定位是您的最佳选择： #标题{ 位置：相对位置； 最小高度：150px； } #标题内容{ 位置：绝对位置； 底部：0； 左：0； } #标题，#标

假设我有以下CSS和HTML代码：

#标题{
高度：150像素；
}

标题
标题内容（一行或多行）
使用CSS定位：

/*在标题上创建新的堆叠上下文*/
#标题{
位置：相对位置；
}
/*将标题内容放置在标题上下文的底部*/
#标题内容{
位置：绝对位置；
底部：0；
}
因此，您需要识别标题内容以使其起作用

某些标题内容
底部
相对+绝对定位是您的最佳选择：

#标题{
位置：相对位置；
最小高度：150px；
}
#标题内容{
位置：绝对位置；
底部：0；
左：0；
}
#标题，#标题*{
背景：rgba（40,40,100,0.25）；
}

标题
在最后一个地方，如果不是这样的话，它们将长期存在，扎根很深，也不会轻易被根除。为了纠正最近违反宪法的行为以及为了其他目的而修改宪法的计划实际上已经在其中一个州进行了试验。
我使用这些属性，并且它可以工作

#标题{
显示：表格单元格；
垂直对齐：底部对齐；
}
我设计了一种比前面提到的简单得多的方法

设置标题div的高度。然后在该高度内，按如下方式设置
H1
标记的样式：

float: left;
padding: 90px 10px 11px
我正在为一个客户开发一个网站，设计要求文本位于某个分区的底部。我使用这两行代码获得了效果，效果很好。此外，如果文本确实展开，填充仍将保持不变。

一个完美的跨浏览器示例可能是：

这样做的目的是在底部显示div，同时使其固定在那里。通常，简单的方法会使粘性div与主要内容一起向上滚动

下面是一个完全有效的示例。注意，不需要div嵌入技巧。许多BR只是为了强制显示滚动条：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #floater {
            background: yellow;
            height: 200px;
            width: 100%;
            position: fixed;
            bottom: 0px;
            z-index: 5;
            border-top: 2px solid gold;
        }

    </style>
</head>


<body>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>


    <div id="floater"></div>
</body>
</html>


* {
保证金：0；
填充：0；
}
#漂浮物{
背景：黄色；
高度：200px；
宽度：100%；
位置：固定；
底部：0px；
z指数：5；
边框顶部：2件纯金；
}
如果您想知道您的代码可能无法在IE上运行，请记住在顶部添加DOCTYPE标记。对于IE来说，这是至关重要的。此外，这应该是第一个标记，上面不应出现任何内容。

如果父/块元素的线高度大于内联元素的线高度，则内联或内联块元素可以与块级元素的底部对齐*

标记：

我在底层
css:

h1.alignBtm{
线高：3em；
}
h1.1 BTM跨度{
线高：1.2米；
垂直对齐：底部对齐；
}
*确保您处于标准模式

似乎正在工作：

#content {
    /* or just insert a number with "px" if you're fighting CSS without lesscss.org :) */
    vertical-align: -@header_height + @content_height;

    /* only need it if your content is <div>,
     * if it is inline (e.g., <a>) will work without it */
    display: inline-block;
}

#内容{
/*或者，如果您在没有lesscss.org的情况下与CSS对抗，只需插入一个带有“px”的数字：）*/
垂直对齐：-@header\u height+@content\u height；
/*只有当你的内容是，
*如果它是内联的（例如，使解决CSS难题更像是编码而不是像……我只是喜欢CSS。当您只需更改一个参数就可以更改整个布局（而不破坏它：）时，这是一种真正的乐趣。
尝试：


div.myclass { margin-top: 100%; }



尝试更改%来修复它。例如：120%或90%…等等。
我刚刚为一个客户端做的站点要求页脚文本是一个高框，底部的文本是我通过简单的填充实现的，应该适用于所有浏览器


<div id="footer">
  some text here
</div>



如果有多个动态高度项目，请使用表格和表格单元格的CSS显示值：

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>


我在这里创建了一个JSBin演示：


演示还提供了一个如何使用相同技术垂直居中对齐的示例。
如果您可以设置内容的包装div的高度（如其他人的回复中所示的标题内容），而不是整个标题，您也可以尝试以下方法：

HTML


在同一个问题上挣扎了一段时间后，我终于找到了一个满足我所有要求的解决方案：


    

  • 不要求我知道容器的高度
    • 

  • 与相对+绝对解决方案不同，内容不会浮动在自己的层中（即，它通常嵌入到容器div中）
    • 

  • 跨浏览器工作（IE8+）
    • 

  • 易于实现
    • 


解决方案只需要一个
，我称之为“对齐器”：

CSS

html

HTML:



本文

他在上面。
我喜欢这里

在底部。



如果您不担心传统浏览器，请使用flexbox

父元素需要将其显示类型设置为flex


div.parent{
显示器：flex；
身高：100%；
}


然后，将子元素的“自对齐”设置为“柔性端点”


span.child{
显示：内联块；
自对准：柔性端；
}


以下是我用来学习的资源：

2015解决方案


<div style='width:200px; height:60px; border:1px solid red;'>

    <table width=100% height=100% cellspacing=0 cellpadding=0 border=0>
        <tr><td valign=bottom>{$This_text_at_bottom}</td></tr>
    </table>

</div>




{$This_text_在底部}





您的欢迎
您不需要绝对+相对。很可能对容器和数据都使用相对位置。这就是您的操作方式

假设数据的高度是
x
。容器是相对的，页脚也是相对的。您所要做的就是添加到数据中


bottom: -webkit-calc(-100% + x);


你爸爸

<div id="header">
    <h1>some title</h1>
    <div id="header-content">
        <span>
            first line of header text<br>
            second line of header text<br>
            third, last line of header text
        </span>
    </div>
</div>



#header-content{
    height:100px;
}

#header-content::before{
  display:inline-block;
  content:'';
  height:100%;
  vertical-align:bottom;
}

#header-content span{
    display:inline-block;
}



.bottom_aligner {
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
    width: 0px;
}



<div class="bottom_aligner"></div>
... Your content here ...



.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;
}



<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>



<div style='width:200px; height:60px; border:1px solid red;'>

    <table width=100% height=100% cellspacing=0 cellpadding=0 border=0>
        <tr><td valign=bottom>{$This_text_at_bottom}</td></tr>
    </table>

</div>



bottom: -webkit-calc(-100% + x);



<div class="container">
  <div class="data"></div>
</div>



.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);
}



h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}



#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;
}



/* HTML */

<div class="content_wrapper">
  <div class="content_floating">
    <h2>HIS This is the header<br>
      In Two Rows</h2>
    <p>This is a description at the bottom too</p> 
  </div>
</div>

/* css */

.content_wrapper{
      display: table;
      width: 100%;
      height: 100%; /* For at least Firefox */
      min-height: 100%;
    }

.content_floating{
  display: table-cell;
  vertical-align: bottom;
  padding-bottom:80px;

}



display: flex;
align-items: flex-end;



#header {
    height: 150px;
    display:flex;
    flex-direction:column;
}

.top{
    flex: 1;
}   

<div id="header">
    <h1 class="top">Header title</h1>
    Header content (one or multiple lines)
</div>



#layer{width:198px;
       height:48px;
       line-height:72px;
       border:1px #000 solid}
#layer a{text-decoration:none;}



<div id="layer">
    <a href="#">text at div's bottom.</a>
</div>



/* parent-wrapper div */
.container {
  display: flex;
  flex-direction: column;
}

/* first-upper div */
.main {
  flex-grow: 1;
}