使用相对

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内（当然，让它看起来很漂亮，并给它一些边距/填充），同时在Tbar的右下方制作2个按钮（圆形彩色div作为链接）。我想我需要按钮是相对的，所以它总是在Tbar里面。尝试“位置：相对;右：10px;底部：0px;”不做我想做的事 - 因为它没有把它移到Tbar的右边。

使用Javascript看起来很荒谬，我对它的实践并不好。

Answer 1

一些好的做法：

• 避免在p标记中添加div或a等元素。
• 这是一个简单的布局，因此无需将div与table混合使用。
• 使用div height的百分比可能无效。

以下是一个工作示例。尝试更改height div的.topLogoContainer以符合您的需要。

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