可調整大小的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區域

回答

相關問題