2017-01-05 2 views
-5

У меня две проблем с раскладкой моей погоды приложенияКак выравнивать столбцы в CSS flexbox?

  1. белого пространство вокруг нижнего и правого краев
  2. Я не могу понять, как выравнивать будни с колонной 5 красных коробки под ним, так что они обе стороны моей стороны

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

https://lettda.github.io/WeatherWiz/

+0

Вопросы ищет отладки помощи («** почему не этот код работает? **») должен включать в себя желаемое поведение, * конкретная проблема или ошибка * и * самый короткий код необходимо *, чтобы воспроизвести его ** в самом вопросе **. Вопросы без ** ясного заявления о проблеме ** не полезны для других читателей. См. [Как создать минимальный, завершенный и проверяемый пример] (http://stackoverflow.com/help/mcve). –

+0

@PraveenKumar 1) Это не отвечает на мой вопрос и не помогает в любом случае 2) Я четко заявил, что хочу их рядом друг с другом. 3) Чтобы понять, что я смотрел на визуальный, не нужно было не мой HTML и весь стиль –

+0

Причина, по которой требуется [mcve], заключается в том, что * мы хотим помочь *. Это намного облегчает помощь, если нам не нужно воссоздавать код, необходимый для дублирования проблемы. Это код, который у вас уже есть. Поэтому, пожалуйста, помогите нам помочь вам и предоставить * полный * [mcve], который дублирует проблему с такими вопросами. Без [mcve] количество усилий, требуемых даже для того, чтобы помочь вам, намного больше **, что значительно уменьшает количество желающих или способных помочь вам. Даже если мы приложим дополнительные усилия, мы должны * угадать * в значительных частях вашей проблемы. – Makyen

ответ

1
  • На .footer установлен bottom: -1px; (он будет придерживаться его на дно)
  • Добавьте класс .col-xs-6 к #weekDay (он будет использовать половину 12 столбцов сетки)
  • Добавить другой .col-xs-6 в #weekly_forecast (он будет использовать другую половину 12-ти столбцовой сетки)
  • Добавить line-height: 140px; в h2 для выравнивания по вертикали с красным div s.
  • Для больших width видовых повторить ту же формулу с col-md-* сек

enter image description here

+2

большое вам спасибо! –

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