Div 실제 자동 너비

기본적으로 div가 float: left 작은 div 인 그리드가 있습니다. 전체 격자에 자동 너비가 있고 그 컨테이너에 상대적으로 가운데에 배치되기를 원합니다. 컨테이너에 대한 display: inline-block에서 grid + text-align: center까지는 원하는 결과를 생성하지 않습니다. 일단 새로운 div가 여러 div로 채워지면 작은 div가 행에 정확히 맞지 않고 오른쪽에 약간의 공백이 남아 있어도 gird의 너비가 컨테이너의 너비로 최대화됩니다.Div 실제 자동 너비

해결책은 무엇입니까? enter image description here

출처

2012-09-08 user1639431

당신이 어떤 에서 함께 사용할 수 사용할 수 있습니까? – Grixxly

컨테이너에 너비를 지정해야한다고 생각합니다. –

왜 float 작은 div입니까? display: inline-block;을 사용하면 센터링 할 때 훨씬 더 많은 제어가 가능하며 display: inline-block;을 수행하여 width을 '자동'으로 만들 수 있습니다. 약간의 작업 데모가 있습니다 : little link.

다음은 기본 개요, HTML의 :

<div class = "container"> 
    <div class = "floatcontainer"> 
     <img src = "" alt = "" class = "floatimg"/> 
     <img src = "" alt = "" class = "floatimg"/> 
     <img src = "" alt = "" class = "floatimg"/> 
     <br/> 
     <img src = "" alt = "" class = "floatimg"/> 
     <img src = "" alt = "" class = "floatimg"/> 
     <img src = "" alt = "" class = "floatimg"/> 
    </div> 
</div>

CSS : 도움

.container { 
    width: 100%; 
    text-align: center; 
} 
.floatimg { 
    width: 100px; 
    display: inline-block; 
    margin: 15px; 
} 
.floatcontainer { 
    display: inline-block; /*makes the div's width only as large as needed*/ 
    text-align: center; 
}

희망!

출처

2012-09-08 15:43:30 Chris

줄마다 3 개의 div 만 있어야한다고 생각 했었습니다. 설명에서 알기가 어렵습니다. – tsergium

@tsergium 음, white-space : nowrap;을 추가하여 각 행에 3 개의'div's를 강제로 적용 할 수 있습니다. 나는 @ user1639431 그가 마음에 정확히 무엇을 가지고 있는지를 명확히 밝힐 수 있기를 바랍니다. – Chris

여기 테이블을 사용해야하지만 그렇지 않은 경우에는 fiddle을 만들었습니다.

HTML

<!DOCTYPE html>

데모

CSS

.container{ 
    margin: 10px; 
    padding: 10px; 
    border: 1px solid #000; 
} 
.item{ 
     height: 10px; 
     margin-top: 10px; 
     margin-right: 2%; 
     width: 32%; 
     float: left; 
     background-color: #dfdfdf; 
    } 
    .mr0{ 
     margin-right: 0; 
    } 
    .clear{ 
     clear: both; 
    }

출처

2012-09-08 15:49:45 tsergium

'div's가 여러분의 데모의 중심에 있다고 생각하지 않습니다. 단지'32 %'의 폭을 가지고 있습니다. – Chris

그냥 간단하게하고 올바르게 포맷을

div.big { 
width:100%; 
} 
div.small { 
    width:33.33% 
}

출처

2016-08-26 12:15:22 Daut

Div 실제 자동 너비

답변

관련 문제