Question

我有以下HTML5页面（在Windows应用商店应用中）：

<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的边距，但是，这会将第二个较小的文本框推到下一行。

我也尝试在盒子上添加边框，但无济于事。

如何在不改变页面整体布局的情况下获得间隙或轮廓线的效果？

Answer 1

您可以将第二行textarea简单地包装到另一个div中，50%和padding-right可以模拟textareas之间的差距：

/* 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/

Answer 2

宽度％遗憾地无法按预期工作。它以父宽度的百分比计算，不考虑边距和填充。如果父级宽度为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;
}

Answer 3

我不确定我的问题是否正确;

顺便问一下，你能用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);      
}

使用边距的CSS3 textarea布局

3 个答案: