Question

我有一个标题，一面有浮动的大图像，另一面有一小段文字。我希望段落从标题div的底部开始。如果段落中有5行，我希望最后一行位于标题的底部。我无法让段落在那里对齐。

我有这样的事情：

<div id='header'>

     <img id='logo' />

     <p id='quote'></p>

</div>

CSS是：

div#header {
    height: 200px;
}

div#header img#logo {
    float: left;
}

p#quote {
    float: left;
}

Answer 1

http://jsfiddle.net/danheberden/ymwPe/

<div id="container">
    <div id="gonnaBeOnTheBottom">
        <p>Hi there!</p>
        <p>I'm on the bottom!</p>
    </div>
</div>

的CSS：

#container {
    background: #EEE;
    height:400px;
    width:400px;
    position:relative;
}
#gonnaBeOnTheBottom {
    position:absolute;
    bottom:0;
}

通过在父容器上设置position:relative，您可以在其中使用绝对位置元素：）

Answer 2

更现代的方法是使用 flexbox ，这大大简化了之后的响应工作。

由于使用自动边距管理Flexbox可用空间分布，您只需执行以下操作：

将父级设置为弹性显示
告诉您希望父级将其子级分布在列布局中（从上到下）
将this->m_memory = new char[this->m_capacity]; this->m_memory[this->m_capacity] = '\0';应用于要粘贴在底部的元素，flex将应用上面的所有可用空间

＆＃13;

margin-top: auto;

＆＃13;

#container {
    background: #eaeaea;
    height:180px;
    display: flex;
    flex-direction: column;
}

#bottom {
  border: 1px solid blue;
  margin-top: auto;
}

＆＃13;

Answer 3

我最近遇到了一个垂直中心技巧，我可以调整到服务器这个目的： http://codepen.io/Bushwazi/pen/VYBBmL

parent {
  height: 200px;
}
child {
  position: relative;
  top: 100%;
  transform: translateY(-100%);
  display block
}

**需要指出的是，浏览器需要支持CSS3 transform：http://caniuse.com/#search=transforms

Answer 4

我在代码中做了一些更改。试试这个

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>


div#header {
height:200px;
}

div#header img#logo {
float:left;
}

.header p {
float:left
}

</style>
</head>
<body>

<div id='header'>

     <img id='logo' src="../Pictures/myfarm.PNG" width="220" height="130" />

 <p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p>
  <p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p>
   <p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p>
    <p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p>
     <p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p>

</div>
</body>
</html>

Answer 5

简单，使用＆＃34;行高＆＃34;属性。

例如：

select{
    line-height: 34px;
    height: 35px;
}

CSS文本对齐容器底部

5 个答案: