Question

我有以下结构：

<div id="hold">
    <div id="hold-left">content</div>
    <div id="hold-right">content</div>
</div>

hold-left向左浮动，hold-right向右浮动。加载页面时的宽度为40％和55％。问题是，hold-right是某种东西的预览，用户需要能够调整它的大小。

这很容易使用JavaScript（用户选择缩放级别单选按钮），但我现在面临的问题是，如果它被放大，它会下降到hold-left以下。我想要它做的是自由地漂浮到父div的外面。

我该如何解决这个问题？可以通过CSS完成，还是每次调整hold-right时都需要动态调整父级的大小？

Answer 1

您是否考虑在.hold-right上使用左边距？

.hold-left{
  float:left;
  width:40%;
}
.hold-right{
  margin-left:45%;
}

此外，通常你应该使用类，而不是ID。

Answer 2

您可以尝试使用display：table和table-cell。该表必须是100％宽度，并且没有为table-cell指定宽度。然后内容将“调整”细胞大小。

否则，您将需要使用javascript来更新两个单元格。

Answer 3

在css中使用position属性。 Checkout this

位置：相对;在父母。
位置：绝对;在每个孩子中。

#hold {
  position: relative;
}

#hold-left {
  position: absolute;
  left: 0;
  width: 100px;
  height: 100px;
  background: red;
}

#hold-right {
  position: absolute;
  right: 0;
  width: 100px;
  height: 200px;
  background: yellow;
}

#zoomLevelSelector {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

允许浮动元素水平溢出

3 个答案: