使用CSS在简单的网页上定位按钮

Question

我正在尝试使用CSS来解决布局问题。像往常一样，似乎有不止一种方法可以做，但我已经想出了一种在我的测试网页上定位的方法，除了在正确的位置获得一些按钮之外，我可以按照我的意愿工作！

如果您原谅我下面的原油涂料布局图，您能否看看我如何安排不同的部件，然后建议如何将按钮放在显示位置？

1. 整个蓝色部分是保存所有内容的包装器，并且有一个 最小和最大宽度。

2. 导航栏 - 只显示为一个块。

3. 主图片的最大宽度为100％，并且报价已定位 在这里面使用相对于这个图像的绝对定位（所以它 与图像一起移动）

4. 描述1和2向左浮动，两者都具有确定的宽度 和保证金（百分比），所以他们不重叠，他们不 超过屏幕宽度。

我的问题是按钮，显示为红色。我怎样才能将它们展示在哪里？如果我按照两个描述浮动它们，则按钮显示得太低（即低于第二个描述，因为这是在页面的下方）。 我已经尝试了一个绝对的位置，但这似乎有点笨重，因为我可以引用它的唯一容器是整个包装器，并且它似乎有点'试验和错误'以使位置完全正确。我可以做一个相对于第一个描述的绝对位置吗？欢迎所有建议/解决方案！

**其他信息**

复制给出的答案后网页布局的屏幕截图：

以下是HTML：

<div class="ib50">
  <div id="desc1">
    <h2>Welcome to Toms Properties</h2>
    <p>There is a second leg to come at Old Trafford - on Wednesday 22 January - but who will the winners of tonight's tie face at Wembley?It will be Manchester City or West Ham, with the first leg of that one taking place at the Etihad tomorrow night.</p>
    <p>Are we anticipating a Manchester derby final?</p>
  </div>
<div id="buttons"><button>Ohai there!</button></div>

</div><div class="ib50">
  <div id="desc2">
    <h2>Site Navigation Tips</h2>
    <p><strong>Charles in Golders Green, via text: </strong>I'm very much a Moyes supporter, but what I can't understand are his claims that we deserved to win or get something out of the Swansea and, to a lesser extent, the Spurs game. Regardless of new signings, now is the time Moyes must earn his money by rallying the side. Two results before Chelsea away in a fortnight are a must.  </p>
  </div>
</div>

以下是CSS：

.ib50 {
    display: inline-block;
    width: 50%;
}

Answer 1

  

4 /描述1和2向左浮动，两者都有确定的宽度和边距（以百分比表示），因此它们不重叠，并且它们不会超过屏幕的宽度。

这是一个非常错误的方法。相反，尝试这样的事情：

<div class="ib50">
    <div>Description 1</div>
    <div id="buttons"><button>Ohai there!</button></div>
</div><div class="ib50">
    <!-- Note that it is important to have no space between tags there -->
    <div>Description 2</div>
</div>

现在应用此CSS：

.ib50 {
    display:inline-block;
    width:50%;
}

你应该能够从这里找出其余部分：）