CSS Text Align Bottom of Container

后端未结

关注

 4  934

I have a header which has a large image floated on one side, and a small paragraph of text on the other side. I want the paragraph to start at the bottom of the header div.

相关标签:

4条回答

猫巷女王i

2020-12-14 17:11

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

by setting position:relative on the parent container, you can absolute position elements inside of it :)

0 讨论(0)

悲&欢浪女

2020-12-14 17:24
I recently came across a vertically center trick that I was able to adjust to server this purpose: http://codepen.io/Bushwazi/pen/VYBBmL
```
parent {
  height: 200px;
}
child {
  position: relative;
  top: 100%;
  transform: translateY(-100%);
  display block
}
```
** Need to point out that browser needs to support CSS3 transform: http://caniuse.com/#search=transforms
0 讨论(0)
发布评论:

提交评论
- 加载中...

清酒与你

2020-12-14 17:25

I made some changes in your code. Try this

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

0 讨论(0)

刺人心

2020-12-14 17:28
A more modern approach would be the usage of flexbox, that vastly eases the responsive work afterwards.

As flexbox free space distribution is managed with auto margins, you simply have to do the following :
- Set the parent to a flex display
- Tell that you want the parent to distribute its children in a column layout (top to bottom)
- Apply a margin-top: auto; to the element that you want to stick at the bottom, flex will apply all the free space above
```
#container {
    background: #eaeaea;
    height:180px;
    display: flex;
    flex-direction: column;
}

#bottom {
  border: 1px solid blue;
  margin-top: auto;
}
```
```
<div id="container">
    <p>Container content</p>
    <div id="bottom">
        This flex content will stay at the bottom!
    </div>
</div>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...