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

Question

我正在尝试使用 CSS 进行布局。像往常一样，似乎有不止一种做事的方法，但我想出了一种在我的测试网页上定位东西的方法，除了在正确的位置放置一些按钮之外，它可以按我的意愿工作!

如果你能原谅我下面粗略的 Paint 布局图，你能看看我是如何安排不同部分的，然后就如何将按钮放置在显示的位置提出建议吗？

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

2. 导航栏 - 仅显示为一个 block 。

3. 主图刚好max-width 100%，引号定位 在此内部使用相对于此图像的绝对定位(因此 随图像移动)

4. 描述 1 和 2 向左浮动，都具有确定的宽度 和 margin (百分比)所以他们不重叠，他们不 超出屏幕宽度。

我的问题是按钮，以红色显示。我怎样才能在显示它们的地方得到它们？如果我按照两个描述 float 它们，按钮会显得太低(即在第二个描述下方，因为它在页面下方)。 我已经尝试过绝对位置，但这似乎有点笨拙，因为我可以引用它的唯一容器是整个包装器，而且要获得完全正确的位置似乎也有点“反复试验”。我可以做一个相对于第一个描述的绝对位置吗？欢迎所有建议/解决方案!

** 附加信息 **

复制给定答案后的网页布局截图:

下面是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/Description 1 and 2 are floated left, both with a determined width and margin (as a percentage) so they dont overlap and they dont exceed the width of the screen.

这是一种非常错误的处理方式。相反，尝试这样的事情:

<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%;
}

你应该能够从这里找出其余的:)