랩핑 다시 상당한 수평 목록, 나는 몇 가지 매우 구체적인 행동, HTML에서 재 상당한 수평 목록을 만들려고 노력하고있어

Question

HTML. 그러나, 나는 그것을 구현하는 최선의 방법에 대해 확신하지 못합니다.

나는 모든 할당 된 가로 공간을 채우기를 원하는 고정 폭 항목 (divs, red)의 목록을 가지고 있습니다. 간격을 메우기 위해 균등하게 퍼져 나갔다. 그러나 가로 화면에 모든 항목을 넣을 수없는 좁은 화면에서는 나머지 항목이 포함 된 다른 행을 양식에 표시하고 싶습니다. 이것은 단어 감싸기와 비슷한 행동이지만, 공간이 허락한다면 항목은 수평으로 균등하게 퍼집니다.

아마도 이것에 대한 간단한 해결책이있는 것 같지만 문제는 Google에 너무 복잡합니다.

Answer 1

나는 당신이 라인을 밀어 항목의 중심으로 투쟁을 거라고 생각하지만, 그것의 나머지를 위해, 당신은 다음과 같이 할 수 있습니다 :이 HTML을 감안할 때

#main 
{ 
    width: 100%; 
    background-color: blue; 
    float: left; 
} 

.redDiv { 
    width: 16% 
    background-color: red; 
    height: 150px; 
    margin: 2%; 
    float: left; 

}

을 구조 :

<div id="main"> 
    <div class="redDiv"></div> 
    <div class="redDiv"></div> 
    <div class="redDiv"></div> 
    <div class="redDiv"></div> 
    <div class="redDiv"></div> 
    <div class="redDiv"></div> 
</div> 

DEMO :http://jsfiddle.net/QwQSd/1

,