Question

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

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

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

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

3 个答案: