CSS3 텍스트 영역 레이아웃을 사용하여 여백

Question

내가 (윈도우 스토어 앱에서) 다음 HTML5 페이지있다 :

<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

:

/* 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를 사용하지 않고 픽셀을 완벽하게 확장하기 위해 너비와 여백/패딩을 결합하는 것은 내 지식으로는 불가능합니다. 내가 생각할 수있는 가장 좋은 점은 50 % 대신 49.5 %의 약간 더 낮은 너비로 설정하고 대칭을 유지하기 위해 텍스트 상자를 좌우로 떠 다니는 것입니다.

텍스트 상자는 부모 크기로 확장되지만 부모가 더 큰 경우 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; 
} 

당신은 단순히 50% 및 padding-right가 텍스트 영역 사이의 간격을 모방해야하는 S '의 또 다른 div로의'의 두 번째 행 textarea을 포장 할 수

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