javascript - 使用边距的 CSS3 文本区域布局

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