使用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的布局利润率

回答

相关问题