定位的容器

我需要在我試圖通過給section two以下css代碼來做到這一點的container div定位的容器

在代碼底部定位section-two的一個div底部：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>

我manged通過給予.container的相對位置來解決這個問題。

來源

2017-09-20 Jordan Kellett

我沒有看到你所提供的HTML .section僞兩..這可能是爲什麼它不會正確位置。你在CSS中也拼寫了「容器」錯誤。 – rblarsen

我已經更新了它;我手動重新輸入HTML並忘記添加類。 –

不要忘記檢查你的錯誤代碼（CSS拼錯單詞「容器」，可能會導致其無法正常工作），還介意絕對定位可能相對定位的元素內被控制。

這裏是關於定位的好文章：

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

來源

2017-09-20 12:44:29 Den

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

來源

2017-09-20 12:44:11

回答

相關問題