使用绝对定位以动态宽度定位内容

Question

我希望将两个 div 放在一个容器中，它们彼此相邻，它们占据容器的 100%，并且两者之间有固定数量的填充。是否可以在不知道 div 的宽度或使用百分比的情况下这样做。希望这个示例代码能让我对我想要实现的目标有所了解。

http://jsfiddle.net/C2uTA/

.orange {
  position:absolute;
  top:0;
  width:45%;
  background-color:orange;
}
.yellow {
  width:auto;
  background-color:yellow;
}    

<!--sample html-->
<div style="position:relative;width:100%">
  <div class="orange">Orange Div</div>
  <div class="yellow">I want this div to start 10px to the right of the orange div</div>
</div>

Answer 1

尝试将此添加到.yellow：

.yellow {
position: absolute;
right: 0;
top: 0;
width: 45%

您可以简单地使用百分比，直到您对两者之间的空间感到满意为止。

Answer 2

尝试使用 float:left; margin-right：（根据您在页面中的方便）在黄色类中将橙色和黄色彼此相邻放置在容器中。

正如 Davion 所说，您可以使用百分比，然后您将获得完美的空间。

Answer 3

尝试使用以下 css 代码：

.orange {
  background-color:orange;
  position: absolute;
  top: 0;
  left: 0;
  right: 50%;
}

.yellow {
  position: relative;
  left: 50%;
  top: 0;
  background-color:yellow;
  width: 48%;
  margin-left: 2%;
}

希望它能帮助您实现目标。