如何在div到底部对齐？

There is h1,p,a in a div, I want h1 in the top of the div, and a in the bottom of the div, and p in the middle no matter the height of p.

在div中有h1,p,a,我想在div的顶部使用h1,在div的底部使用a,在p的中间使用p而不管p的高度。

jsfiddle

Here is source:

这是来源:

html

<div class="box">    
  <div>
    <h1>Header</h1>
    <p>text <br>line2<br>line3</p>
    <a href="#">bottom</a>
  </div>
  <div>
    <h1>Header</h1>
    <p>text <br>line2</p>
    <a href="#">bottom</a>
  </div>
</div>

css

.box {
  box-sizing: border-box;
  padding: 0 1px;
  margin: 0;
  overflow: hidden;
  clear: both;
  border: 1px solid blue;
}
.box div {
  float: left;
  width: 50%;
  box-sizing: border-box;
  padding: 10px;
}
.box h1 {
  padding: 0;
  margin: 0 0 10px;
}
.box p {
  padding: 0;
  margin-right:5px;
  text-wrap:normal;
}
.box a {
}

2 个解决方案

#1

Check following solution works for you:

检查以下解决方案是否适合您:

html, body{
    height:100%;
}
.box {
    border: 1px solid blue;
    box-sizing: border-box;
    clear: both;
    height: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0 1px;
    position: relative;
}
.box div {
    bottom: 0;
    box-sizing: border-box;
    display: inline-block;
    height: 100%;
    position: relative;
    top: 0;
    vertical-align: top;
    width: 50%;
}
.box h1 {
    margin: 0 0 10px;
    padding: 0;
}
.box p {
    margin-right: 5px;
    padding: 0;
}
.box a {
    bottom: 0;
    position: absolute;
}

<div class="box">    
    <div>
      <h1>Header</h1>
      <p>text <br>line2<br>line3</p>
      <a href="#">bottom</a>
    </div><div>
      <h1>Header</h1>
      <p>text <br>line2</p>
      <a href="#">bottom</a>
    </div>
</div>

2 个解决方案

#1

更多相关文章

随机推荐