使用CSS3 textarea的佈局利潤率

我有以下的HTML5頁面（在Windows Store應用）：使用CSS3 textarea的佈局利潤率

<div> 
    <textarea id="wideBox" class="wideInput"></textarea>   
    <textarea id="small1" class="narrowInput"></textarea> 
    <textarea id="small2" readonly class="narrowInput"></textarea> 
</div>

下面CSS：

.wideBox { 
    width: 100%; 
    box-sizing: border-box; 
    opacity: 80; 
    height: 200px; 
    background: -ms-linear-gradient(top, #213A4F, #1a82f7); 
} 

.narrowInput { 
    width: 50%; 
    box-sizing: border-box; 
    height: 200px; 
    float: left; 
    padding: 5px; 
    background: -ms-radial-gradient(bottom, #6BBEC7, #1a82f7); 
}

那我以後的影響是單個寬文本框與兩個相同大小的文本區域下面。

這是行不通的，但是，較小的文本框只是合併在一起。爲了抵消這一點，我嘗試引入1px的餘量，但是，這會將第二個較小的文本框推到下一行。

我也嘗試在框中添加邊框，但無濟於事。

如何在不改變頁面整體佈局的情況下得到間隙或輪廓的效果？

來源

2013-02-19 pm_2

你'.wideBox'，這就是你的'id'的名稱。在你的css中將它改爲'.wideInput' – ashley 2013-02-19 08:48:25

你可以簡單地包裝你的第二排textarea的到另一個div的這將對50%和padding-right效仿文字區域差距：

/* textareas are inside this .wrap and have 100% */ 
.wrap { 
    width: 50%; 
    box-sizing: border-box; 
    float: left; 
} 
.wrap-first { 
    padding-right: 1px; 
}

http://jsfiddle.net/dfsq/RHYSL/

來源

2013-02-19 09:03:37 dfsq

寬度％可悲地不按預期工作。它計算爲父寬度的百分比，並且不考慮邊距和填充。如果父寬度爲100px，並且設置了50％的寬度，則它將與設置爲50px的寬度相同。現在添加填充5px到這個，你有55px的寬度，這將推下其中一個框。根據我的知識，不可能將寬度％和邊距/填充組合起來，以便在不使用JavaScript的情況下完美縮放像素。我能想到的最好的設置是稍低一點的寬度，49.5％而不是50％，並左右移動文本框以保持對稱性。

文本框會根據父大小進行縮放，但兩個框之間的距離也會縮放，因爲如果父大大，0.5％會更大。

<div> 
    <textarea id="wideBox" class="wideBox"></textarea>  
    <textarea id="small1" class="narrowInput left"></textarea> 
    <textarea id="small2" readonly="readonly" class="narrowInput right"></textarea> 
    <div class="clear"></div> 
</div> 

.wideBox { 
width: 100%;  
box-sizing: border-box; 
opacity: 80;  
height: 200px; 
background: -ms-linear-gradient(top, #213A4F, #1a82f7); 
} 

.narrowInput { 
width: 49.5%; /* Note lower width */ 
box-sizing: border-box;  
height: 200px; 
padding: 5px; 
background: -ms-radial-gradient(bottom, #6BBEC7, #1a82f7);  
} 

/* Float to keep symmetric layout */ 
.left { 
    float: left; 
} 

.right { 
    float: right; 
} 

/* clear after float */ 
.clear { 
clear: both; 
}

來源

2013-02-19 08:52:16

我不是當然如果我的問題正確，

順便說一句，你可以使用CSS3 Calc？

演示：http://jsfiddle.net/4uc3N/

HTML

<div> 
    <textarea id="wideBox" class="wideInput"></textarea>  
    <textarea id="small1" class="narrowInput"></textarea> 
    <textarea id="small2" class="narrowInput"></textarea> 
</div>

CSS

#wideBox { 
    width: calc(100% - 4px); /* A Trick */ 
    box-sizing: border-box; 
    opacity: 80;  
    height: 200px; 
    background: -ms-linear-gradient(top, #213A4F, #1a82f7); 
} 

.narrowInput { 
    width: calc(50% - 14px); /* Another Trick */ 
    box-sizing: border-box;  
    height: 200px; 
    float: left; 
    padding: 5px; 
    background: -ms-radial-gradient(bottom, #6BBEC7, #1a82f7);  
}

來源

2013-02-19 10:42:11

使用CSS3 textarea的佈局利潤率

回答

相關問題