내부 div가 확장됨에 따라 HTML 열이 더 넓게 만듭니다

StackOverflow https://stackoverflow.com/questions/269761

  •  06-07-2019
  •  | 
  •  

문제

다음을 고려하십시오.

<td style="width: 500px;">
    <div style="width: 400px;">SomeContent</div>
</td>

어떤 이유로, DIV를 포함하는 열은 스타일에서 알 수 있듯이 500px로 확장되지 않습니다.

TD가 스타일로 지정하는 너비를 존중하는 방법을 알고 있습니까?

도움이 되었습니까?

해결책

이론적으로는 최소 폭과 최대 세기의 스타일을 사용할 수 있습니다. 실제로, 일부 인기있는 브라우저는 이러한 스타일을 무시합니다. 이 경우 너비는 400의 폭을 명시 적으로 선언 했으므로 자라나거나 부모가 축소되지 않는 한 항상 400과 같아야합니다. "서버"를 실행하고 콘텐츠 크기에 따라 너비 속성을 프로그래밍 방식으로 결정하거나 오버플로 스타일로 재생하거나 수평 스크롤 바가있는 패널에 넣을 수 있습니다.

다른 팁

테이블에 너비가 있고 테이블 내에 다른 TD가 있습니까? 또한 DOC 유형이 진행되고 있습니까?

그러나 여기에 귀하의 해결책이 있습니다.

<td style="width: 500px">
  <div style="padding: 0 50px">SomeContent</div>
</td>

패딩을 적절하게 설정합니다.

질문을 다시 읽으면 이것이 당신이 찾고있는 답이 아닐 수도 있습니다. 조금 더 자세히 설명해 주시겠습니까?

이 시도:

<td style="width:500px;">
  <div style="width:100%;">SomeContent</div>
</td>

그러나 TD가 DIV의 정확한 크기가 되려면 최대 500px입니다.

<td style="max-width:500px;">
  <div style="width:100%;">SomeContent</div>
</td>

IE6은 최대 폭을 이해하지 못하고 500px로 강제로 강요합니다.

TD 내 DIV에서 고정 너비를 설정할 이유가 없습니다. 기본적으로 DIV는 블록 요소 가므로 포함 요소의 전체 너비를 채울 것입니다.

동일한 스타일을 달성하기 위해 TD에 패딩을 설정하거나 DIV의 마진을 설정하십시오.

Futher Markup 또는 CSS를 보지 않으면 TD가 500px가 아닌 이유를 알 수 없습니다. 요소에 두 가지 배경색을 추가하면 TD가 DIV보다 100px 더 넓다는 것을 알게됩니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top