ポジショニング相対

Question

私のCSSを使用して、右へのdiv：

.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：私は、ウェブサイト（のは "Tbar" と呼んでみましょう）の上部のバーを持っている

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

（あなたが知っています（ここでは、ロゴとナビゲーションボタンがどこに行くのか）、そして、私は2つのボタン（丸い色のdivそれはリンクです）、Tbarの右の内側にあります。私はボタンが相対的である必要があると思うので、それは常にTbarの中にあります。試行位置：相対、右：10ピクセル、下：0ピクセル、それはTbarの右の内側に移動しないので、私が望むことをしません。

Javascriptは使いにくいようですが、私はそれをうまく練習していません。

Answer 1

いくつかの良いプラクティス：あなたのaタグ内pまたはdivなどの要素を追加

• は避けてください。
• これは単純なレイアウトなので、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>