Display-рядный блок и изображение

Question

Я новичок в проектировании и поэтому есть некоторые проблемы ...

мне нужно 3 блока, чтобы быть инлайн и по центру, поэтому я попытался:

#main .block{ 
    display: inline-block; 
    border: 1px solid #ECEDE8; 
    margin: 10px 10px; 
    overflow: hidden; 
    height: 265px; 
    width: 265px; 
} 

Но, когда я добавляю изображение в блок, все остальные спускаются.

P.S.

Как я вижу, эта проблема находится в сафари, в Firefox все нормально.

P.S.S

<div id="main"> 
<div class="block">main 
<img src="style/images/try.png"> 
</div> 
<div class="block">main</div> 
<div class="block">main</div> 
<div class="block">main</div> 
<div class="block">main</div> 
<div class="block">main</div> 
</div> 

P.S.S.S

Как я мог понять это думал Google, вся проблема в дисплее: встроенный блок, в сафари работает дисплей: встроенный стол. Какое решение может быть?

Answer 1

Если ваши блоки фиксированной ширины, то почему бы не всплывают их вместо этого и поместить их в родительском контейнере с общей шириной и по центру, используя маржу: 0 авто

Answer 2

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

vertical-align: top 

Таким образом, ваш CSS должен быть:

#main .block{ 
    display: inline-block; 
    border: 1px solid #ECEDE8; 
    margin: 10px 10px; 
    overflow: hidden; 
    height: 265px; 
    width: 265px; 
    vertical-align: top; 
} 

Answer 3

Элемент DIV является блочный элемент. Элемент img является элементом встроенного блока; он имеет основные функции встроенного элемента (за исключением того, что он имеет элементы элемента блока по высоте и ширине). Поэтому я вижу две основные проблемы с вашим кодом. Во-первых, ваше изображение каким-то образом означает замену той же единицы пространства, что и вы одновременно отображаете слово «main», которое может вызвать конфликт с интервалом/отображением. [Я рекомендую удалить слово «main» из вашего HTML.] Во-вторых, вы не указываете высоту и/или ширину изображения, что на самом деле не проблема, так как у вас есть значение переполнения, установленное на скрытое, но все же в целом вы должен иметь значение высоты и/или ширины (сделать их меньше высоты и ширины родительского контейнера), поскольку это сделает браузеры рендерингом/отображением более универсальных/совместимых кросс-браузеров. Реализация комбинации этих двух вещей [или изменения отображаемого значения на встроенную таблицу (что похоже на то, что вы хотите, так как ваш дисплей кажется «tablular»)] СЛЕДУЕТ исправить вашу проблему. Если это не так, я бы рекомендовал изменить значение маржи в 0 auto (что будет иметь эффект центрирования вашего изображения в середине вашего контейнера div/parent), потому что у меня есть затяжное подозрение, что ваши значения маржи могут также быть при игре (но только если другие два предложения не работают). Удачи!

PS: Помните, что только потому, что у вас переполнение: скрытое не означает, что браузер не «видит» переполненный элемент (ы). Помните модель коробки.