Центрирующий элемент с шириной в процентах, но с максимальной шириной

Question

Центрирующий элемент с шириной в процентах, но с максимальной шириной

0

Я пытаюсь сделать следующее: (JSFiddle внизу)

Как это должно работать:

yellow box должен заполнить оставшееся пространство, и даже если красная коробка имеет width: 25% она не должна превышать 330px. Если желтая рамка (заполняющая оставшееся пространство) имеет ширину меньше 1000 пикселей, она должна быть полностью заполнена синим прямоугольником, но если она имеет ширину больше 1000 пикселей, синяя коробка должна иметь width: 1000px и быть центрирована внутри желтый коробка.

В красном поле у меня есть hide button которая скрывает левую полосу, а в синей - у меня есть кнопка, которая возвращает левую панель. Когда левая панель скрыта, она должна выглядеть так:

Проблемы, с которыми я столкнулся:

Если разрешение составляет ширина> 1800 пикселей (например), то красное поле (из-за этого max-width меньше 25%) и не заполняет весь контейнер. (Экран проблемы в скрипке)
[Исправлено] Я не мог понять, как bluebox, потому что ширина составляет 100%, но максимальная ширина не позволяет коробке быть более 1000 пикселей. (Экран проблемы, должен быть центрирован)

Вот JSFIDDLE моей проблемы: JSFIDDLE. Уменьшите (используя ctrl + mousewheel down), чтобы увидеть проблему, поскольку она была в более высоком разрешении.

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

Deepsy 08 май 2014, в 02:49

Источник

0

Что именно вы имеете в виду с первой проблемой? Зеленый div не подходит к остальной части пространства?
display-name-is-missing 08 май 2014, в 00:33
0

@DanielLisik на более высоких разрешениях, ширина красного поля составляет 330px (что, например, намного меньше, чем 25% от 1920), поэтому для redbox будет, например, 10% от ширины контейнера, поэтому 10% + 75% = 85 %, что оставляет 15% незаполненного пространства.
Deepsy 08 май 2014, в 00:36

Теги:

javascript

jquery

html

css

css3

1 ответ

Ещё вопросы

Что именно вы имеете в виду с первой проблемой? Зеленый div не подходит к остальной части пространства?
@DanielLisik на более высоких разрешениях, ширина красного поля составляет 330px (что, например, намного меньше, чем 25% от 1920), поэтому для redbox будет, например, 10% от ширины контейнера, поэтому 10% + 75% = 85 %, что оставляет 15% незаполненного пространства.

Aaron · Accepted Answer · 2014-05-07T22-56-00.000Z

Чтобы центрировать элемент по горизонтали, вам необходимо добавить следующие два свойства CSS в центр-правый класс:

margin-left: auto;
margin-right: auto;

Вот обновленный JsFiddle.

вау, я пробовал это несколько раз, но теперь это сработало! Спасибо! Я очень ценю это! Есть ли у вас какие-либо предложения по первой проблеме?
Для 1-ой проблемы посмотрите этот SO вопрос и ответ; stackoverflow.com/questions/1260122/… .
Это именно то, что мне нужно. Большой! Спасибо!