패딩이있는 960 와이드 트리플 컬럼 레이아웃

960 와이드 캔버스에서 트리플 컬럼 레이아웃을 디자인하는 방식에 문제가 있습니다.패딩이있는 960 와이드 트리플 컬럼 레이아웃

enter image description here

나는 넓은 960 인 DIV 요소가 :

이

내가 시도하고있는 무슨의도이다. 그것은 20px 외곽 주위에 패딩을 가지고 있으며 그 안에 3 개의 동일한 컬럼이 필요합니다.

누군가가 세 개의 열로 나를 도울 수 있습니까? 그래서 각 상자와 그 사이의 여백은 동일합니까? 2와 4 개의 열은 간단하지만 3으로 나눈 값은 포함 된 요소의 20px 안쪽 여백과 동일하지 않습니다. 2 열 및 4 열을 사용할 때 FLOAT : LEFT를 사용하고 CLEAR가있는 추가 요소를 사용합니다. 모든 .960_element 클래스 이름의

<style> 
.960_element { width:960px; padding:20px; } 
.960_element .left { } 
.960_element .middle { } 
.960_element .right { } 
</style> 

<div class="960_element"> 
    <div class="left"></div> 
    <div class="middle"></div> 
    <div class="right"></div> 
</div>

출처

2012-11-04 ShadowStorm

단순히 내부 요소의 너비를 33 %로 설정하려고 했습니까? 나는 그것이 효과가있을 것이라고 생각한다. –

1이 잘못, 당신은 수

Demo

HTML

<div class="element">  
    <div class="left">h</div>  
    <div class="middle">h</div>  
    <div class="right">h</div> 
</div>

CSS

.element { width:960px; padding:20px;background-color: #dddddd;margin: 40px;/*margin not required*/} 
.element div {background-color: #ff0000;} 
.left { height: 200px; width: 32%; display: inline-block;} 
.middle { height: 200px; width: 32%; margin-left: 14px; display: inline-block; } 
.right { height: 200px; width: 32%; margin-left: 14px; display: inline-block; }

로 시작하는 클래스 이름을 정의 할 수 없습니다

출처

2012-11-04 06:49:21

도와 주셔서 감사합니다. 요소 이름은 요소를 설명하기 위해 만들어졌습니다. 나는 판결을 알고 있었다. – ShadowStorm

@ ShadowStorm 당신을 환영합니다 :) –

각 항목 주위에 10 픽셀의 여백을 두는 것이 더 일반적이므로 항목 사이의 공간은 최대 20 픽셀을 추가하고 측면의 공간은 10 픽셀에 불과합니다.

상황에 따라 상자의 너비는 960-80/3 (너비에서 마진을 상자로 나눈 값)에서 계산 한 너비가 293 (및 세 번째) 픽셀이어야합니다.

너비가 980 인 경우 또는 왼쪽 및 오른쪽으로 10 픽셀 여백이있는 경우 상자에 좋은 짝수 (300)가 생길 수 있습니다.

출처

2012-11-04 06:51:58

패딩이있는 960 와이드 트리플 컬럼 레이아웃

답변

관련 문제