CSS : 서로 겹쳐서 가운데에 놓인 4 개의 컨테이너

Question

매우 간단한 질문에 대한 사과는 매우 간단합니다. 내가하는 일과 상관없이 내가 원하는 것처럼 보이게 할 수는 없습니다.

기본적으로 140x140 크기의 광고 4 개를 660 픽셀 너비의 컨테이너 전체에 골고루 펼칩니다. 그러나 시작하려면 2 (광고주 수요가 증가함에 따라 4로 증가 할 것입니다. 지금 당장은 2 개의 140x140 크기의 컨테이너를 660px 크기의 div에 중심에두고 그 사이에 간격을두고 싶습니다. 이 행에 컨테이너 3과 4가 추가되면 컨테이너 1과 컨테이너 2를 기반으로 새 컨테이너를 추가하기 만하면 1과 2가 자동으로 왼쪽으로 이동해야합니다.

기본적으로 원하는 것은 하나의 광고 컨테이너에서, 그것은 중앙에있다. 존에 두 개의 광고가 있다면, 그들은 중심에 위치합니다. 3, 가운데. 4, centerered. 광고 스크립트가 컨테이너 ID를 기반으로 광고를 삽입하므로 각 광고 단위는 자체 컨테이너에 있어야합니다.

나는이 분명하다 좋겠지 만하지 않으면 것은 알려 주시기 바랍니다. 나는 각각의 컨테이너를 왼쪽으로 띄워서 4 개의 컨테이너를 서로 띄울 수 있지만, 행에 컨테이너가 2 개 밖에없는 경우에는 오프셋을 추가하지 않으면 가운데에 배치하지 못하게합니다. 행에 다른 보급 알림을 추가 할 때 다시 계산되어야 함).

Answer 1

부모 클래스에 text-align:center을, 자식 클래스에 display:inline-block을 사용할 수 있습니다. 그 수에 관계없이 중심에 배치됩니다.

Demo. 직접 볼 광고 요소를 제거해보십시오.

Answer 2

Check out bootstrap 열의 처리 방법을 확인하십시오. 실제 너비를 찾으려면 약간의 파고가 필요할 수도 있지만 거기에 있습니다.

예를 들어, 3 열 레이아웃은 각 열에 33.33333 %의 너비를 제공합니다. 이 꽤 거친이지만, 내가 무슨 말 당신과에게 아이디어를 줄 것이다 :

.column { 
    float: left; 
    width: 33.33333%; 
    box-sizing: border-box; 
    padding: 10px; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 

더 많은 열/요소 높을 %가 될 것입니다.

브라우저 지원에 따라 "상자 크기 조정"이 사용 가능하거나 사용하지 못할 수 있습니다. 어떤 경우에는 창의력을 발휘해야 할 수도 있습니다.