CSS, плавающие коробки натыкаясь друг на друга

Question

Я нуб, так что мой код очень прост:

.pictureBoxWrapper1 { 
    width: 225px; 
    /* background: silver; */ 
    margin: 0 auto; 
    padding:7px; 
    float:left; 
    border:dotted; 
    margin-right:10px; 

} 

К сожалению, до сих пор дает мне некоторые неожиданные результаты, как это:

Как видите, у меня есть две коробки слева, которые «натыкаются» друг на друга.

Есть ли способ, который я могу сделать, чтобы моя коробка не расширялась независимо от того, какой текст/изображения в ней есть?

UPDATE: Pastebin для всего CSS файла http://pastebin.com/tp1WS4r3

Answer 1

Это происходит потому, что ваши изображения большего размера. Вы можете попробовать ограничения размера изображения, либо с помощью стиля в теге изображения,

<img style="height:auto; width:auto; max-width:300px; max-height:300px;" src="...">

или через CSS

#bg { 
    position: fixed; 
    top: 0; 
    left: 0; 

    /* Preserve aspet ratio */ 
    max-width: 100%; 
    max-height: 200px; 
} 

HTML

<div id="bg"> 
    <img src="..." alt=""> 
</div> 

Answer 2

max-height: 200px; 

Они не получите больше, чем 200px

Answer 3

я думаю, вы должны .fix изображение высота до 160 пикселей, а также высота коробки до 308 пикселей; для подтверждения и подробного решения PLS онлайн, если это возможно.

Answer 4

Вы можете использовать мин-высота или максимальная высота внутри CSS, как:

max-height: 200px; 
min-height: 200px; 

или снимите поплавок после кратного 3-х элементов, например

после 3-го элемента добавить

<div style="clear:both"></div> 

после 6-го элемента добавить

<div style="clear:both"></div> 

после 9-го элемента добавить

<div style="clear:both"></div> 

и так далее, и так далее

Надеются, что это помогает

Answer 5

делая им один и тот же размер поможет - но если они не имеют одинаковый размера.

Для многоразмерных полей вы можете использовать столбцы CSS3 вместо полей «float: left», чтобы расположить их в свободной сетке.

http://www.w3schools.com/css/css3_multiple_columns.asp

Класс колонн предназначен, чтобы абзац текста течь в столбцах - например, с газетой, - но может быть взломан, применяя один и тот же стиль сдержанных коробок.

Сначала создайте стеновой контейнер для ящиков - который я назову кирпичами.

<div class="wall"> 
</div> 

.wall { 
    width: 100% !important; 
    column-count: 3 !important; 
    column-gap: 25px; 
} 

Далее нужен кирпич. Но есть проблема! Вероятно, вы захотите добавить маркер к нижней части каждого кирпича, чтобы освободить их. К сожалению, CSS-столбцы немного изворотливы и фактически разрывают маржу в следующем столбце, оставляя пробелы в верхней части некоторых столбцов, но не на других. Вот почему вам понадобятся два контейнера для каждого кирпича. Как так:

<div class="outer-brick"> 
    <div class="inner-brick"> 
    Any contents ... 
    </div> 
</div> 

Добавить «NOBREAK» стиль внешнего кирпича - так что вы можете добавить поле для внутреннего кирпича, который остается с ним.

.wall .outer-brick { 
    display: block-inline !important; 
    /* prevent brick's padding splitting across columns */ 
    break-inside: avoid !important; 
    /* !useful "margin" between inner-bricks to match column-gap */ 
    padding-bottom: 25px; 
} 
.wall .outer-brick .inner-brick { 
    /* CSS3: border and padding taken away from width */ 
    box-sizing: border-box !important; 
    /* !useful for contents, but not important */ 
    padding: 5px 15px; 
} 

Всё. Даже с коробками самого разного размера они будут равномерно распределены как по горизонтали, так и по вертикали в столбцах. Чем больше у вас получается, тем лучше.

См демонстрационный со случайно сгенерированным кирпичом в http://codepen.io/timitee/pen/wWRgqk