定位使用相對

Question

我的CSS股利的權利：

.topLogoContainer{ 
     margin-top: 2%; 
     width: 100%; 
     height: 20%; 
     background-color: #660066; 
     border-radius: 10px; 
    } 
    .topLogoText{ 
     width: 50%; 
     padding: 10px; 
    } 
    p.topButton{ 
     text-align: center; 
     color: white; 
    } 

我的HTML：

<div class="topLogoContainer"> 
    <table> 
     <tr> 
      <td class="topLogoText"> 
       <font size="18">TB's Jewelry</font> 
      </td><td> 
       <a href="buy.php" class="topButton"> 
        <div class="topButton2"> 
         <p class="topButton">buy</p> 
        </div> 
       </a> 
      </td> 
     </tr> 
    </table> 
</div> 

我有一個網站（姑且稱之爲 「TBAR」）的頂欄（你知道，其中的標誌和導航按鈕去），我想在左側的主文本，垂直居中在Tbar（當然，使它看起來不錯，給它一些邊距/填充），同時做2個按鈕（這是圓形彩色divs這是鏈接）在最底部，在Tbar的右側內部。我認爲我需要按鈕是相對的，所以它總是在Tbar內。嘗試「position：relative; right：10px; bottom：0px;」不會做我想要的 - 因爲它不會將它移動到Tbar的內部右側。

Javascript看起來很荒謬，但我沒有很好的練習它。

Answer 1

一些好的做法：

• 避免添加元素，如p或div您a標籤內。
• 這是一個簡單的佈局，所以混合div與table是沒有必要的。
• 使用百分比爲您的div的height可能無法正常工作。

下面是一個工作示例。嘗試更改.topLogoContainer div的height以符合您的需求。

.topLogoContainer { 
 
    margin-top: 2%; 
 
    width: 100%; 
 
    height: 300px; 
 
    background-color: #660066; 
 
    border-radius: 10px; 
 
    position: relative; 
 
} 
 
.topLogoText { 
 
    position: absolute; 
 
    left: 10px; 
 
    top: calc(50% - 9pt); 
 
    color: white; 
 
    font-size: 18pt; 
 
    padding: 10px; 
 
} 
 
.linkContainer { 
 
    position: absolute; 
 
    bottom: 10px; 
 
    right: 0; 
 
} 
 
.topButton { 
 
    margin-right: 10px; 
 
    float: right; 
 
    text-align: center; 
 
    color: white; 
 
}

<div class="topLogoContainer"> 
 
    <div class="topLogoText">TB's Jewelry</div> 
 
    <div class="linkContainer"> 
 
    <a href="buy.php" class="topButton">something else</a> 
 
    <a href="buy.php" class="topButton">buy</a> 
 
    </div> 
 
</div>