960gs를 사용 중입니다. div을 사용하지 않고 div에 패딩을 추가하려고합니다. 당신이 960gs에 의해 생성 된 레이아웃을 깰 것이다 실제 div에 패딩을 추가하는 경우960g의 내부 div를 사용하지 않고 div에 패딩을 추가하려면 어떻게해야합니까?
당신은,보고, 나는이 문제를 해결하기 위해 찾은 유일한 방법은 내 다른 div를 만들고 해당에 패딩을 적용하는 것입니다.
나는이 방법으로 아무 문제가 없다고 생각하는데, 나는 단지 두 번째를 찾는다 div 불필요하고 차라리 그것을 사용하지 않을 것이다 ... 어떤 생각?
이것은 그리드 시스템의 주요 단점 중 하나입니다. 불행히도 필자가 아는 한, 여분의 마크 업을 추가하는 것 이외에는 패딩 문제를 해결할 방법이 없습니다. 따라서 inner div를 추가하는 것이 좋습니다 ("grid_xx"클래스가없는 클래스).
그러나 용감한 느낌이 들게되면 (그리고 코딩을 많이 할 준비가 됨) 하위 요소에 직접 패딩을 지정할 수 있습니다.
<div class="grid_12">
<div class="inner_div" style="padding:10px">
<p>This is some sample text</p>
</div>
</div>
아니면 내부 사업부를두고,이 같은 자식 요소에 직접 스타일을 사용할 수 있습니다 : 여기에 두 가지 솔루션에 대한 코드는
는<div class="grid_12">
<p style="padding:10px">This is some sample text</p>
</div>
분명히 당신은 대신 CSS를 사용할 수 있습니다 인라인 CSS가 있지만 원칙은 동일합니다.
희망이 있습니다.
청사진이나 YUI CSS 프레임 워크를 살펴볼 수도 있지만, 정확히 똑같은 문제가 있다는 것을 알고 있습니다.
내가 아는 한, 자식 요소에 직접 추가하는 것은 훨씬 더 사납다 (내 호주 변명) 것 같습니다. CSS 상자 모델이 패딩을위한 너비를 추가하는 것은 수치스러운 일입니다. 솔직히 말해서 그것은 꽤 비논리적입니다. –
뭔가 다른 주위에 놀고 싶지 수도 있습니다 (이 경우 0 Exp를 얻었지만) : after 가상 속성입니다. 나는 그것이 구식 브라우저를 얼마나 잘 지원하는지 dunnow ... Modernizr, CSS3Pie 또는 eCSStender와 같은 CSS3 라이브러리를 사용해야 할 수도 있습니다. 그리고 호주인의 소리에 대해 걱정할 필요가 없습니다 (단, 남아프리카 공화국을 용서할 수있는 경우 - 허.) –
그레이트 아이디어! 나는 심지어 아동용 가짜가 있다고 생각합니다. 그래서 어린이 요소 모두에 패딩을 적용하는 좋은 방법이 될 수 있습니다. –
상자 크기는 작동하지 않습니까?
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
div {
width: 100px;
box-sizing: border-box;
}
경계 박스 폭과 높이 속성은 패딩과 테두리가 아닌 여백을 포함한다. 이것은 문서가 Quirks 모드 일 때 Internet Explorer 에 사용되는 상자 모델입니다.
폭 + 패딩을 다시 계산 하시겠습니까? – easwee
그런 종류의 그리드 시스템을 사용하는 목적을 무너 뜨리는 것은 해결책이지만, 그렇습니다. –
앵거스 : 개별 div의 패딩을 변경하는 것보다 그리 그리드 요소를 깔끔하게 정리할 것입니다. – Chris