Question

我在一个字段集中使用了两个div来保持我的部分页面区域

    <fieldset style="padding: 20px, 20px, 20px, 20px; background-color: #EAEAEA;">
    <div class="col1" >
    ...
    </div>
    <div class="col2">
    ...
   </div>

具有以下样式：

.col1 {
    clear:both;
    float:left;
    overflow:hidden;
    width:10%;
}
.col2 {
    float:left;
    width:90%;
}

首先，我希望在视觉上将它们分开，所以我添加到col1：

    border-right:2pt solid black;

嗯，这增加了黑线，但现在我的col1 div超过了我的col2 div。我怎么能纠正这个？我觉得这可能是一个边缘的事情，但增加2个右边距并没有帮助。

另外，我最终想让这个分隔符成为我可以向左/向右平移以相对于彼此调整两个div的大小的位置（即使一个30％宽，另一个70％，或10％，90 ％等）

Answer 1

由于您使用％作为宽度，因此您需要使用100％的屏幕分辨率，因此您需要减小col2的宽度。由于您添加了一个2pt边框，基本上超过100％，您需要确保调整宽度。你可以调整col2或col1，我为你调整了col2。

.col1 {
    clear:both;
    float:left;
    overflow:hidden;
    width:10%;
    border-right:2pt solid black;
}
.col2 {
    float:left;
    width:89%;
}

Example

Answer 2

您无法为已经100％填充的屏幕添加边框。

EG。如果您的屏幕是1000px，并且您将其分成10％/ 90％，那么现在您有两个分别为100px和900px的对象。添加边框将使其成为102px和900px，总共1002px（比屏幕大2px），因此它将包装。

使用固定尺寸作为宽度或将另一个容器放入其中。

可调整大小的div区域

2 个答案: