이 문제가 이전에 요청 된 적이 있지만 답을 찾을 수없는 것 같습니다.
다음 마크 업이 있습니다.
<div id="foo">
<div id="bar">
here be dragons
</div>
</div>
내 욕망은 foo를 600px( width: 600px;) 너비 로 만들고 bar가 다음과 같은 동작을 갖도록 만드는 것입니다.
padding-left: 2px;
padding-right: 2px;
margin-left: 2px;
margin-right: 2px;
outerWidth: 100%;
즉, 막대의 너비를로 설정하는 대신 막대 592px의 바깥 쪽 너비를로 설정하여 100%로 계산되도록하고 싶습니다 592px. 여기서 중요한 점은 내가 foo의 너비를로 변경할 수 800px있고 bar가 렌더링 될 때 이러한 모든 인스턴스에 대해 수학을 수동으로 수행하는 대신 계산한다는 것입니다.
순수한 CSS에서 가능합니까?
그것으로 좀 더 재미 :
#bar테이블 이면 어떨까요?- 어떤 경우
#bar텍스트 영역은 무엇입니까? -
#bar입력이 있다면 어떨까요? -
어떤 경우에하는
#foo테이블 셀입니다 (td)? (이로 인해 문제가 변경됩니까? 아니면 문제가 동일합니까?)
지금까지 table#bar, input#bar논의되고있다. textarea # bar에 대한 좋은 솔루션을 보지 못했습니다. 테두리 / 여백 / div랩이 있는 패딩이없는 텍스트 영역 div이 textarea.
답변
수정 :
이 세 가지 요소는 모두 렌더링 규칙이 다릅니다.
따라서 :
table#bar너비를 100 %로 설정해야합니다. 그렇지 않으면 필요한만큼만 너비가됩니다. 그러나 테이블 행의 총 너비가 너비보다 크면 bar필요한 너비로 확장됩니다. 내가 기억한다면 당신은 display: block !important;ive가 그것을 고쳐야 한 이후로 잠시 동안 설정함으로써 이것을 막을 수 있습니다 . (내가 틀렸다면 누군가 나를 바로 잡을 것입니다).
textarea#bari beleive는 블록 수준 요소이므로 div와 동일한 규칙을 따릅니다. 여기서주의해야 할 점은있다 textarea의 속성을 cols하고 rows문자 컬럼에서 측정한다. 이것이 요소에 지정되면 CSS에서 지정한 너비를 재정의합니다.
input#bar인라인 요소이므로 기본적으로 너비를 할당 할 수 없습니다. 그러나 textarea의 cols속성 과 유사하게 size너비를 결정할 수있는 요소에 속성이 있습니다. 즉, display: block;CSS를 사용하여 항상 너비를 지정할 수 있습니다 . 그런 다음 div와 동일한 렌더링 규칙을 따릅니다.
td#footable-cell약간의 광기 가있는로 렌더링됩니다 . 요점은 귀하의 목적 div#foo에 따라 내용의 너비를 제한하는 것처럼 작동한다는 것 입니다. 여기서 유일한 문제는 너비 설정을 무시하게 만드는 열의 줄 바꿈 불가능한 텍스트 일 것입니다. 또한 열의 모든 셀은 가장 넓은 셀의 너비를 얻습니다.
이것이 블록 레벨 요소의 기본 동작입니다. 너비가 auto(기본값)이면 포함하는 요소의 내부 너비의 100 %가됩니다. 그래서 본질적으로 :
#foo {width: 800px;}
#bar {padding-left: 2px; padding-right: 2px; margin-left: 2px; margin-right: 2px;}
당신이 원하는 것을 정확하게 줄 것입니다.
답변
거의, 단지 변경 outerWidth: 100%;에 width: auto;(outerWidth는 CSS 속성 없음)
또는 막대에 다음 스타일을 적용하십시오.
width: auto;
display: block;
답변
스타일 사용
left: 0px;
또는 / 그리고
right: 0px;
또는 / 그리고
top: 0px;
또는 / 그리고
bottom: 0px;
나는 그 일을 할 대부분의 경우에 대해 생각합니다
답변
따라서 연구 후에 다음이 발견되었습니다.
A에 대한 div#bar설정 display:block; width: auto;의 등가 원인outerWidth:100%;
의 경우 table#bar아래에 명시된 규칙에 따라 div로 래핑해야합니다. 따라서 구조는 다음과 같습니다.
<div id="foo">
<div id="barWrap" style="border....">
<table id="bar" style="width: 100%; border: 0; padding: 0; margin: 0;">
이렇게하면 테이블이 상위 div 100 %를 차지하고 테이블 #barWrap에 테두리 / 여백 / 패딩을 추가하는 데 사용됩니다 #bar. 당신이 모든 일의 배경을 설정해야 함을 참고 #barWrap하고있다 #bar‘의 배경을 투명 또는 동일 #barWrap.
의 경우 textarea#bar와 input#bar똑같은 작업을해야합니다. table#bar단점은 테두리를 제거하면 입력 / 텍스트 영역의 기본 위젯 렌더링이 중지되고 #barWrap의 테두리가 다른 모든 항목과 약간 다르게 보일 수 있다는 것입니다. 이 방식으로 모든 입력을 스타일링하십시오.
답변
