Question

尝试使green div'填充'区域的其余部分而不与可调整大小的red div重叠。当red div调整大小时，green div也会自动调整大小。

有没有简单的方法只用css这样做？不需要额外复杂的js功能吗？

我见过像this这样的东西，但我正在寻找一个更简单的解决方案，其中包含实时拖动结果。外部插件也没有。

Answer 1

如果您将box-sizing: border-box;添加到.left和.right以及制作height: 100%;并将width: 80%;添加到.right，您将获得你想要的效果。两者不会重叠，因为你可以看到红色和绿色的两面。

box-sizing的作用是告诉网站是否在定义的宽度中包含填充或填充和边框。因此，如果width在这种情况下为80%，而您的border为4px，则width确实是100% + 4px。添加box-sizing: border-box;包含4px中的width边框。

CSS：

body, html {
  padding: 0;
  margin: 0;
  height: 100%
}

.left {
  border: 2px solid red;
  height: 100%;
  width: 20%;
  box-sizing: border-box;
}

.right {
  float: right;
  border: 2px solid green;
  height: 100%;
  width: 80%;
  box-sizing: border-box;
}

Answer 2

只需在CSS中添加resize类（请参阅示例代码），这将为您调整div的大小，并在调整大小时保持其边框颜色，而不使用javascript代码。

你也可以参考我的jsfiddle：http://jsfiddle.net/0792rpto/

示例代码：

HTML：

<div id="main">
  <div class="resize left">RED</div>
  <div class="resize right">BLUE</div>  
</div>

CSS：

.resize {
    resize: both;
    overflow: auto;
}

.left {
    border: 2px solid red;
    display: inline;
    float: left;
    padding: 10px;
}

.right {
    border: 2px solid green;
    display: inline;
    float: left;
    padding: 10px;
}

如何在可调整大小的div更改宽度旁边分别设置div

2 个答案: