1

我有以下 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，但是，这具有将第二个较小的文本框推到下一行的效果。

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

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

4

3 回答 3

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/

于 2013-02-19T09:03:37.500 回答
0

遗憾的是，宽度 % 没有按预期工作。它被计算为父宽度的百分比，并且不考虑边距和填充。如果父级是 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-19T08:52:16.667 回答
0

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

顺便问一下，你能用 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-19T10:42:11.183 回答