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

不要忘记检查代码是否存在错误（css中拼写错误的单词“container”可能导致其无效），还要注意绝对定位可以在相对定位的元素内进行控制。

这是关于定位的好文章：

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

您的代码带有一些基本的视觉添加颜色，可以清楚地看到变化（注意位置：CSS中的相对位置）

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

Answer 2

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

定位容器的div底部

2 个答案: