综合编程

CSS3 textarea layout using margins

微信扫一扫,分享到朋友圈

CSS3 textarea layout using margins
0 0

I have the following HTML5 page (in a Windows Store App):

And the following 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);
}

The effect that I'm after is a single wide text box with two, equally sized smaller text areas beneath.

This does work, however, the smaller text boxes just merge together. To counteract this, I tried introducing a margin of 1px
, however, this had the effect of pushing the second smaller text box to the next line.

I've also tried adding a border to the boxes, but to no avail.

How can I get the effect of a gap, or delineator, without changing the overall layout of the page?

Problem courtesy of: pm_2

Solution

You can simply wrap your second row textarea
's into another div
's which would have 50%
and padding-right
to emulate gap between 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/

Solution courtesy of: dfsq

Discussion

Width % sadly does not work as expected. It is calculated as a % of the parent width and does not take margin and padding into account. If the parent is 100px wide and you set 50% width, it will be the same as setting 50px width. Now add padding 5px to this and you got a total 55px width which will push down one of the boxes. It is with my knowledge impossible to combine width % and margin/padding to make pixel perfect scaling without javascript. The best I can think of is this setting a slightly lower width, 49.5% instead of 50% and floating the textboxes left and right to keep the symmetry.

The textboxes will scale with parent size, but the distance between the two boxes will also scale because that 0.5% will be larger if the parent is larger.

.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; }

Discussion courtesy of: Rasmus Franke

I'm not sure if I've got your question correctly;

by the way, can you use CSS3
Calc ?

Demo: http://jsfiddle.net/4uc3N/

HTML

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);      
}

Discussion courtesy of: Andrea Ligios

This recipe can be found in it's original form on Stack Over Flow
.

CSS3 Recipes
感谢您的支持!

    看一名 KDE 开发者如何使用 C++17 为项目提升巨大速度

    上一篇

    又一款关注隐私保护的开源智能手机操作系统:/e/

    下一篇

    您也可能喜欢

    评论已经被关闭。

    插入图片

    热门分类