Почему отображение: table-cell; скрыть другие элементы со средствами массовой информации?

Я начал работать над разделом значков для моего текущего проекта.Почему отображение: table-cell; скрыть другие элементы со средствами массовой информации?

Проблема заключается в том, когда я использую display: table-cell; и изменить три .icon стилей с запросом медиа в width: 100%; вместо 32%. Остальные два исчезают, пока первый пока не отображается.

Я выяснил, как решить это, изменив его на display: block;, но я немного смущен, почему два других divs исчезают.

Вот их CSS:

.icon { 
    display: table-cell; 
    vertical-align: middle; 
    width: 32%; 
    position: relative; 
    border-radius: 5px; 
    padding: 15px 0; 
}

Кроме того, здесь скрипку: DEMO

Любые идеи, что здесь происходит? Нужно ли table-cell выровнять по горизонтали и не разбиваться ниже? Когда я проверяю их на консоли, он говорит, что первый имеет ширину 500 пикселей, а остальные два - 0.

источник

2014-01-22 Josh Powell

@Adrift К сожалению, это не помогает. Когда на мобильном устройстве я хочу, чтобы они занимали 100% от ширины, а остальные спускались ниже друг друга. Поскольку экран намного шире, я перехожу от 3 столбцов к 1. –

@Adrift Вы живой CSS-герой :) –

Именно так я исправил проблему изначально, изменив ее на отображение блока. Я просто волновался, что это испортит нам горизонтальное выравнивание. По крайней мере, это не так, но почему это так? Лучшая идея, о которой я могу думать, это таблицы, которые не будут разбивать каждую ячейку, чтобы не попасть под нее. Я остаюсь далеко от стола, поэтому они немного новы для меня. –

Раскладка таблицы, похоже, разбивается на эту ширину, другим решением было бы установить свойство display.icon будет table-row в вашем медиа-вызове. Это заставляет его интерпретировать div как строку вместо ячейки внутри строки и складывает их по вертикали.

Вот fiddle

@media only screen and (max-width: 680px) { 
    .icon { 
    width: 100%; 
    display: table-row; 
    } 
}

Честно говоря, я не уверен, что в этот момент, почему таблица-макет нарушения с вашим кодом, но я могу объяснить, почему выше манящую работу, так что я предположим, это обходное решение, а не исправление.

источник

2014-01-22 19:26:18 Dpeif

Спасибо за ваше время. Это отлично работает! единственной проблемой является состояние зависания. Кажется, он активирует только один из них, но может быть активирован любым из div. –

Это потому, что 'display: table-row' по сути отрицает' position: relative', поэтому '.iconInfo' теперь находится абсолютно по отношению к' .chat-icons'. У них также есть «высота: 100%», поэтому они занимают весь div. Они сложены в порядке внешнего вида, поэтому последний укладывается сверху, а поскольку он находится внутри третьей строки, это тот, который получает эффект наведения. – brouxhaha

display: table-row отрицает position: relative, поэтому .iconInfo теперь будет располагаться относительно .chat-icons. Поскольку .iconInfo имеют высоту 100%, они будут обрабатывать весь div. Они также будут сложены в том порядке, в котором они находятся в html, поэтому нижняя .iconInfo находится сверху, поэтому это изображение всегда активируется при наведении указателя мыши.

Это кажется хаккой, потому что я использую число, которое просто «выглядит правильно», но здесь вы идете. Я также должен был изменить фон на .icon вместо .iconInfo из-за изменения в позиционировании:

DEMO

@media only screen and (max-width: 680px) { 
.icon { 
    display: table-row; 
} 
.icon:hover { 
    background: rgba(0,0,0,0.2); 
} 
.iconInfo { 
    position: relative; 
    height: auto; 
    display: block; 
    margin-top: -20%; 
} 
}

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

источник

2014-01-22 20:54:27 brouxhaha

Почему отображение: table-cell; скрыть другие элементы со средствами массовой информации?

ответ

Смежные вопросы