頁腳div元素有我的頁腳中的問題重疊

Question

IM（開始學習CSS前兩天）。這是我的頁面的底部： https://gyazo.com/b681e5ca06f7f89bac727ea20a1ff3dd

現在我想的鏈接，堅持底部，但不會操縱利潤分別爲每個div。所以我試圖讓父div有位置：相對和內部元素有位置：絕對。 發生的事情是這樣的： https://gyazo.com/0031cbb528e4c80600f1533f4b60993d

對CSS的相關代碼：

.footer { 
    width: 100%; 
    height: 200px; 
    float: left; 
    position: relative; 
    display: inline-block; 

} 
.infotype { 
    float: left; 
    display: inline-block; 
    color: black; 
    width: 30%; 
    margin-left: 30px; 
    bottom: 0 auto; 
    position: absolute; 
} 

---

爲HTML相關代碼：

<section class="row"> 
      <div class="footer"> 
       <div class="infotype data"> 
        <h3>Rockets and spacecraft</h3> 
        <a href="#">Falcon 9</a><br> 
        <a class="info" href="#">Falcon Heavy</a><br> 
        <a class="info" href="#">Dragon</a> 
       </div> 
       <div class="infotype updates"> 
        <h3>Updates</h3> 
        <a class="info" href="#">News</a><br> 
        <a class="info" href="#">Launch Manifest</a> 
       </div> 
       <div class="infotype about"> 
        <h3>About SpaceX</h3> 
        <a class="info" href="#">Company</a><br> 
        <a class="info" href="#">Careers</a><br> 
        <a class="info" href="#">Gallery</a><br> 
        <a class="info" href="#">Shop</a> 
       </div> 
      </div> 
     </section> 

對不起，我可憐的格式化的技能，就像我提到的我是新來的。

Answer 1

我已經刪除了浮動和絕對定位，使用flexboxes進行佈局。你可以閱讀flexboxes here。

我也刪除了HTML中的換行符。

.footer { 
 
    width: 100%; 
 
    height: 200px; 
 
    position: relative; 
 
    display: flex; 
 
    justify-content: space-around; 
 
} 
 

 
.infotype { 
 
    display: flex; 
 
    flex-flow: column; 
 
    justify-content: flex-start; 
 
} 
 

 
h3 { 
 
    font-size: 1em; 
 
}

<section class="row"> 
 
    <div class="footer"> 
 
    <div class="infotype data"> 
 
     <h3>Rockets and spacecraft</h3> 
 
     <a href="#">Falcon 9</a> 
 
     <a class="info" href="#">Falcon Heavy</a> 
 
     <a class="info" href="#">Dragon</a> 
 
    </div> 
 
    <div class="infotype updates"> 
 
     <h3>Updates</h3> 
 
     <a class="info" href="#">News</a> 
 
     <a class="info" href="#">Launch Manifest</a> 
 
    </div> 
 
    <div class="infotype about"> 
 
     <h3>About SpaceX</h3> 
 
     <a class="info" href="#">Company</a> 
 
     <a class="info" href="#">Careers</a> 
 
     <a class="info" href="#">Gallery</a> 
 
     <a class="info" href="#">Shop</a> 
 
    </div> 
 
    </div> 
 
</section>

Answer 2

試試這個html和css。只需創建.infotype的內部div，使position: absolute正常工作。

.footer { 
    width: 100%; 
    height: 200px; 
    float: left; 
    position: relative; 
    display: inline-block; 

} 
.infotype { 
    float: left; 
    display: inline-block; 
    color: black; 
    width: 30%; 
    margin-left: 30px; 
    position: relative; 
} 

.infotype-inner{ 
position: absolute; 
right: 0; 
bottom: 0; 
left: 0; 
} 

<section class="row"> 
      <div class="footer"> 
       <div class="infotype data"> 
        <div class="infotype-inner"> 
         <h3>Rockets and spacecraft</h3> 
         <a href="#">Falcon 9</a><br> 
         <a class="info" href="#">Falcon Heavy</a><br> 
         <a class="info" href="#">Dragon</a> 
        </div> 
       </div> 
       <div class="infotype updates"> 
        <div class="infotype-inner"> 
         <h3>Updates</h3> 
         <a class="info" href="#">News</a><br> 
         <a class="info" href="#">Launch Manifest</a> 
        </div> 
       </div> 
       <div class="infotype about"> 
        <div class="infotype-inner"> 
         <h3>About SpaceX</h3> 
         <a class="info" href="#">Company</a><br> 
         <a class="info" href="#">Careers</a><br> 
         <a class="info" href="#">Gallery</a><br> 
         <a class="info" href="#">Shop</a> 
        </div> 
       </div> 
      </div> 
     </section> 

Answer 3

如果您不擔心支持舊的瀏覽器，你可以替換所有你的CSS的：

.footer { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end; 
} 

更多關於Flex：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 4

你需要這樣的東西。

試試這個代碼..

.footer { 
width: 100%; 
height: 200px; 
position: relative; 

} 
.infotype { 

float:left; 
color: black; 
width: 30%; 
margin-left: 30px; 
}