содержания центра в центре DIV

Question

я следующее:

<div class='container-main'> 
<div class='container-inner'> 
    <div class='clickable-box'> 
    stuff 
    </div> 
    <div class='clickable-box'> 
    stuff 
    </div> 
    <div class='clickable-box'> 
    stuff 
    </div> 
</div> 
</div> 

.container-main { 
width: 100%; 
} 
.container-inner { 
width: 90%; 
} 
.clickable-box { 
width: 300px; 
height: 300px; 
/* ???? */ 
} 

Я пытаюсь сделать это так, интерактивное окно будет сосредоточено внутри внутренний контейнер, если нет достаточно мест для другого интерактивного поля рядом к нему.

НО если имеется достаточно ширины (600px +), то они создают 2 колонки (которые вместе с центрами внутри внутреннего контейнера), и если Theres даже больше места (900px +), затем 3 колонки и т.д. ...

Другими словами, когда я начинаю с окна шириной 500 пикселей, он должен показать 1 столбец ящиков, все выстроенные друг под друга. Когда я вытаскиваю окно, ящик должен оставаться в центре до тех пор, пока у вас не будет достаточно места для другого, чтобы пойти рядом с ним, и вместо этого они создают 2 столбца и так далее.

Но я не хочу, чтобы столбец поплавка влево или вправо, в то время как я перетащить окно и оставить большое пустое пространство

Answer 1

Попробуйте CSS:

.container-main { 
width: 100%; 
} 
.container-inner { 
width: 99%; 
    text-align:center 
} 
.clickable-box { 
display: inline-block; 
width: 32%; 
margin: 0 auto; 
} 

Answer 2

Я думаю, что вы» вам нужно установить clickable-box в display: inline-block. Параметр display: inline-block по существу делает div как текст в отношении правил выравнивания текста, но сохраняет некоторые свойства блока. Это очень мило.

HTML

<div class='container-main'> 
    <div class='container-inner'> 
    <div class='clickable-box'> 
    stuff 
    </div> 
    <div class='clickable-box'> 
    stuff 
    </div> 
    <div class='clickable-box'> 
    stuff 
    </div> 
    </div> 
</div> 

CSS

.container-main { 
    background-color: red; 
    text-align: center; 
} 

.container-inner { 
    width: 90%; 
} 

.clickable-box { 
    background-color: blue; 
    width: 300px; 
    display: inline-block; 
} 

Вот a fiddle демо это!

Answer 3

дисплея: встроенный блок должен быть лучшим решение, это будет отображать интерактивные окна в одной строке, если есть место для них:

.clickable-box { 
    width: 300px; 
    height: 300px; 
    display:inline-block; 
} 

добавить также выравнивание текста: центр родительского DIV для того, чтобы которые можно центрировать по центру

.container-inner { 
    width: 90%; 
    text-align:center; 
} 

Answer 4

Я думаю, что это должно быть сделано. Я немного изменил CSS, чтобы добавить некоторые границы, чтобы увидеть, как выглядят коробки. Вы могли бы удалить эти границы.

Fiddle Demo

.container-main { 
width: 100%; 
} 
.container-inner { 
    width: 90%; 
    border:3px solid #454; 
    text-align:center; 
} 
.clickable-box { 
    width: 300px; 
    height: 300px; 
    border:1px solid #000; 
    margin:0 auto; 
    display:inline-block; 

} 

Answer 5

Я хотел бы использовать правила с плавающей точкой, потому что они могут толкать вниз коробки, которые не соответствуют. Например, float: left доставит вам как минимум две коробки на 1096px. display:inline может иметь проблемы с отображением браузера.

.container-main { 
width: 100%; 
} 
.container-inner { 
width: 90%; 
} 
.clickable-box { 
width: 300px; 
height: 300px; 
float:left; // right there. 
}