CSS3 макет текстовое поле с использованием полей

Question

У меня есть следующие страницы HTML5 (в Windows Store App):

<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 'S в другой 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/

Answer 2

Ширина: 5 К сожалению, не работает должным образом. Он рассчитывается как% от ширины родителя и не учитывает маржу и отступы. Если родительский шрифт имеет ширину 100 пикселей и вы устанавливаете ширину 50%, он будет таким же, как и установка ширины 50 пикселей. Теперь добавьте дополнение 5px к этому, и вы получите общую ширину 55 пикселей, которая надавит на один из ящиков. По моим знаниям невозможно объединить ширину% и margin/padding, чтобы сделать пиксельное совершенное масштабирование без 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);  
}