Центр Div, выровненный между двумя поплавками, не работает в Safari после медиазапроса.

Question

Центр Div, выровненный между двумя поплавками, не работает в Safari после медиазапроса.

0

У меня есть левый и правый плавающий div. У меня есть квадрат посередине, который не плавает, и устанавливается как центрированный между двумя поплавками. Если окно слишком маленькое, я хочу сбросить правый div под всем.

Это отлично работает в firefox, но в сафари это работает изначально, но не удается после изменения размера.

Есть идеи? http://jsfiddle.net/bzr49/

<div class="wrapper">
<div class="left">hey</div>
<div class="middle">hey</div>
<div class="right">hey</div>

.wrapper {
    text-align: center;    
}

.left {
    float: left;
    width: 100px;
    margin-right: 16px;
    background: yellow;
}

.middle {
    display: inline-block;
    margin: 0 auto;
    width: 200px;
    background: red;
}

.right {
    clear: both;
    float: none;
    margin-left: 0;
    width: 150px;
    background: green;
}

@media screen and (min-width: 472px) {
    .middle {float: none;margin: 0 auto;}
    .right {clear: none;float: right;margin-left: 16px;}
}

Alex Lacayo 06 май 2014, в 00:42

Источник

0

в скрипке, когда я изменяю размер, зеленая коробка опускается ниже красной и желтой. Можете ли вы опубликовать скриншот того, как выглядит ваш и как вы хотите, чтобы он выглядел?
Anindya Basu 05 май 2014, в 22:06
0

та же проблема, кажется, возникает в Chrome. Зеленое поле падает, когда вы уменьшаете масштаб, но не перемещается обратно вверх при увеличении. Это снова хорошо, когда вы перезагрузите. По моему опыту, браузеры webkit могут немного глючить в своих медиа-запросах при изменении размера. Не забывайте, что только мы, разработчики, делаем это для тестирования, ни один реальный пользователь не играет с его размером области просмотра, как мы. Я бы не стал кодировать ошибки браузера!
Pevara 05 май 2014, в 22:09
0

@AnindyaBasu Да, когда вы изменяете размер, он падает, но когда вы снова изменяете размер, он больше не перемещается обратно.
Alex Lacayo 05 май 2014, в 22:21

Показать ещё 1 комментарий

Теги:

html

css

safari

1 ответ

Ещё вопросы

в скрипке, когда я изменяю размер, зеленая коробка опускается ниже красной и желтой. Можете ли вы опубликовать скриншот того, как выглядит ваш и как вы хотите, чтобы он выглядел?
та же проблема, кажется, возникает в Chrome. Зеленое поле падает, когда вы уменьшаете масштаб, но не перемещается обратно вверх при увеличении. Это снова хорошо, когда вы перезагрузите. По моему опыту, браузеры webkit могут немного глючить в своих медиа-запросах при изменении размера. Не забывайте, что только мы, разработчики, делаем это для тестирования, ни один реальный пользователь не играет с его размером области просмотра, как мы. Я бы не стал кодировать ошибки браузера!
@AnindyaBasu Да, когда вы изменяете размер, он падает, но когда вы снова изменяете размер, он больше не перемещается обратно.

Anindya Basu · Accepted Answer · 2014-05-05T19-36-00.000Z

.wrapper {
    text-align: center;    
}

.left {
    float: left;
    width: 100px;
    margin-right: 16px;
    background: yellow;
}

.middle {
    display: inline-block;
    margin: 0 auto;
    width: 200px;
    background: red;
}

.right {
    clear: both;
    display: inline-block;
    float: left;
    margin-left: 0;
    width: 150px;
    background: green;
}

@media screen and (min-width: 472px) {
    .middle {float: none;margin: 0 auto;}
    .right {clear: none;float: right;margin-left: 16px;}
}

Установка правого div для display: inline-block и float:left фиксировал его для меня. http://jsfiddle.net/bzr49/7/