定位容器的 div 底部

Question

我需要将 section-two 放在 container div

的底部

在代码中，我试图通过给 section two 以下 css 代码来做到这一点：bottom: 0

.container {
  float: left;
  height: 400px;
  width: 40%;
  position: relative;
  background: #ccc
}

.section-one {
  padding: 40px
}

.section-two {
  background-color: #e14a3f;
  padding: 40px;
  position: absolute;
  bottom: 0px;
}

<div class="container">

  <div class="section-one">
    <h3>You're invited to this years</h3>
    <h1>Open Evening</h1>
    <h4>Wednesday 27th September</h4>
    <h4>(4:30 PM - 7:00PM)</h4>
  </div>

  <div class="section-two">
    <p style="color: #fff;">number here</p>
  </div>

</div>

我设法通过给 .container 一个相对位置来解决问题。

Answer 1

.container {
float: left;
width: 40%;
}

.section-one {
padding: 40px
}

.section-two {
background-color:#e14a3f;
padding: 40px;
position: absolute;
bottom: 0px;
}

<div class="container">

<div class="section-one">
<h3>You're invited to this years</h3>
<h1>Open Evening</h1>
<h4>Wednesday 27th September</h4>
<h4>(4:30 PM - 7:00PM)</h4>
</div>

<div  class="section-two"><p style="color: #fff;">number here</p></div>

</div>

Answer 2

不要忘记检查您的代码是否有错误（在 css 中拼写错误的单词 "container" 可能会导致它无法正常工作），同时请注意绝对定位可能会控制在相对定位的元素内。

这是一篇关于定位的好文章：

https://css-tricks.com/absolute-positioning-inside-relative-positioning/

您的代码在颜色上添加了一些基本的视觉效果，以便清楚地看到更改（注意 CSS 中的 position:relative）

HTML:

<div class="container">

<div class="section-one">
<h3>You're invited to this years</h3>
<h1>Open Evening</h1>
<h4>Wednesday 27th September</h4>
<h4>(4:30 PM - 7:00PM)</h4>
</div>

<div class="section-two">
<p style="color: #fff;">number here</p></div>

</div>

CSS:

.container {
float: left;
height: 400px;
width: 40%; 
position:relative;
background: #ccc
}

.section-one {
padding: 40px
}

.section-two {
background-color:#e14a3f;
padding: 40px;
position: absolute;
bottom: 0px;
}

这是给你的工作笔： https://codepen.io/anon/pen/LzNMxo

定位容器的 div 底部

Positioning a div bottom of a container

html

css

position

placement