可调整大小的DIV区域

我有两个div，我使用一个字段中保持独立的我的一些网页方面的可调整大小的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是ABO VE我的col2 div。我该如何解决这个问题？我想这可能是一个保证金的事情，但增加2点的右边缘没有帮助。另外，我最终想让这个分割器成为一个我可以左右调整两个div相对位置的区域（例如，使一个30％宽，另一个70％或10％ 90％等）

来源

2011-11-30 Derek

我认为col2 div应该一直低于col1 div。 Div标签通常使用display：block来呈现，这意味着它们将会换行。可以通过将显示更改为显示来改变：内联或使用位置：绝对或类似。 – Qqwy

由于您使用％作为宽度，因此您正在使用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

来源

2011-11-30 19:48:31 Robert

不能添加边框的屏幕已经是100％充满。

例如，如果你的屏幕是1000px，并且你将它分成10％/ 90％，你现在分别有两个对象，分别是100px和900px。添加边框会使它成为102像素和900像素，总共1002像素（比您的屏幕大2像素），因此会换行。

可以使用固定尺寸的宽度，也可以在其中放置另一个容器。

来源

2011-11-30 19:49:19 romo

可调整大小的DIV区域

回答

相关问题