Наплыв блоков с фиксированной шириной элементов

@Hakken · Регистрация: 13.11.2015

Author24 — интернет-сервис помощи студентам

Добрый день.
Не давно начал осваивать Html и Css.
Решил на работе сверстать страницу для удобства перехода по внутренним мониторингам.
Проблема заключается в том, что при сворачивании браузера один блок "залазит" на другой, а хотелось бы что бы он просто смешался в низ. (или при сворачивании фиксированная ширина кнопок уменьшалась бы)
Это происходит из-за того что кнопки внутри блоков с фиксированной шириной(хочу что бы они были одинакового размера), если задать в % то "наплывов" нет, но тогда меня не устраивает вид в полно экранном режиме.
Во вложении скрины.
Код HTML для форума уменьшил для удобства, оставил по 2 кнопки в блоке.
Буду признателен, если поможете или укажите путь размышлений =)
Спасибо.

HTML5

<div class= "head">
    <span >Мониторинги и вспомогательное ПО Филиала Центральный</span>
    </div>
    
    <div class = "box" >
    <form action="1" target="_blank">
                    <button class="button button--winona button--border-thin button--text-thick button--inverted" data-text="Система мониторинга загрузки каналов связи Cacti"><span>Система мониторинга загрузки каналов связи Cacti</span></button>
    </form><p>
    <form action="1" target="_blank">
                    <button class="button button--winona button--border-thin button--text-thick button--inverted" data-text="Система мониторинга качества каналов связи Nagios"><span>Система мониторинга качества каналов связи Nagios</span></button>
    </form>
    </div>
    <div class = "box1">
    <form action="1" target="_blank">
                    <button class="button button--winona button--border-thin button--text-thick button--inverted" data-text="Карта филиала Центральный"><span>Карта филиала Центральный</span></button>
    </form>
    <form action="1" target="_blank">
                    <button class="button button--winona button--border-thin button--text-thick button--inverted" data-text="Отчет о проведённых профилактиках ТТ"><span>Отчет о проведённых профилактиках ТТ</span></button>
    </form>
    </div>

CSS

.button {
    float: left;
    width:500px;
    display: block;
    margin: 1em;
    padding: 1em 2em;
    padding-top: 1px;
    border: none;
    margin-bottom:1px;
    background: none;
    color: inherit;
    vertical-align: middle;
    position: relative;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
}
.button:focus {
    outline: none;
}
.button > span {
    vertical-align: middle;
}

CSS

.box {
    padding-top: 1px;
    padding-left: 5em;
    width: 50%;
    float: left;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    
}
.box1 {
    padding-top: 1px;
    padding-right:5em;
    float: left;
    width: 50%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    
}
 
.head {
 
height:30px;
text-align: center;
background: none;
color: inherit;
vertical-align: middle;
font-weight: bold;
background: #BFCACF;   
    
}

@Fedor92 · 13.11.2015, 13:39

Hakken, по хорошему Вам лучше бы это всё переверстать... Я бы использовал таблицу, пожалуй...

@Hakken · 13.11.2015, 17:43 **[ТС]**

Переверстал. Не то что хотел, но на много лучше.
Подскажите еще, для общего развития. Свойство "clear" запрещает "обтекание". Возможно ли реализовать так, что бы если страница на весь экран это свойство не работает, если страница свернута, работает.
Т.е. получается блок бы смещался автоматом при сворачивании.
Или такое реализуется только в JS?
Простите за мои извращены представления о верстке =)

@Fedor92 · 13.11.2015, 18:13

Hakken, я так понимаю Вы имеете ввиду разные разрешения...

Как вариант на html можно попробовать реализовать подобное с помощью медиазапросов, то есть в зависимости от разрешения применять те или иные свойства к объектам на странице...

Новые блоги и статьи
Что такое HCL Notes и как с ним работать InfoMaster 10.01.2025 HCL Notes (ранее известный как IBM Notes и Lotus Notes) представляет собой комплексную платформу для совместной работы и обмена информацией в корпоративной среде. Это многофункциональное решение,. . .	Как работать с Git из Windows и Visual Studio InfoMaster 10.01.2025 Работа с Git в Windows Работа с Git в операционной системе Windows может быть осуществлена с помощью различных инструментов, каждый из которых обладает своими уникальными возможностями и. . .	Аналог оператора switch case в Python InfoMaster 10.01.2025 Оператор switch case используется в программировании для выбора одного из нескольких вариантов исполнения кода. Однако в языке Python этот оператор отсутствует. Понимание аналогов switch case в. . .	Отличия абстрактного класса от интерфейса InfoMaster 10.01.2025 В современной разработке программного обеспечения существуют два основных механизма реализации абстракции: абстрактные классы и интерфейсы. Эти инструменты, хотя и схожи в своей основной цели -. . .	Как работать в Git InfoMaster 10.01.2025 Git — это одна из наиболее популярных систем контроля версий, которая активно используется разработчиками по всему миру. Она позволяет эффективно управлять изменениями в коде, координировать работу. . .	Реализация передвижения персонажа в Unity3d на C# InfoMaster 10.01.2025 Реализация передвижения персонажа в Unity3D начинается с правильной настройки проекта. Этот этап критически важен для создания отзывчивого и плавного управления. Рассмотрим основные шаги для создания. . .
Docker: руководство для начинающих InfoMaster 10.01.2025 В современном мире разработки программного обеспечения контейнеризация стала неотъемлемой частью процесса создания и развертывания приложений. Docker, как ведущая платформа контейнеризации, произвела. . .	Книги и учебные ресурсы по C# InfoMaster 08.01.2025 Базовые учебники и руководства Одной из лучших книг для начинающих является "C# 10 и . NET 6 для начинающих" Эндрю Троелсена и Филиппа Джепикса . Книга последовательно раскрывает основные концепции. . .	Что такое NullReferenceException и как исправить? InfoMaster 08.01.2025 NullReferenceException - одно из самых распространенных исключений, с которым сталкиваются разработчики на C#. Это исключение возникает при попытке обратиться к членам объекта (методам, свойствам или. . .	Что такое Null Pointer Exception (NPE) и как это исправить? InfoMaster 08.01.2025 Null Pointer Exception (NPE) - это одно из самых распространенных исключений в Java, которое возникает при попытке использовать ссылку на объект, значение которой равно null. Это исключение относится. . .	Русский язык в консоли C++ InfoMaster 08.01.2025 При разработке программ на C++ одной из частых проблем, с которой сталкиваются русскоязычные программисты, является корректное отображение кириллицы в консольных приложениях. Эта проблема особенно. . .	Telegram бот на C# InfoMaster 08.01.2025 Разработка ботов для Telegram стала неотъемлемой частью современной экосистемы мессенджеров. C# предоставляет мощный и удобный инструментарий для создания разнообразных ботов, от простых. . .

@Fedor92 2964 / 2620 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	13.11.2015, 13:39	2
	Hakken, по хорошему Вам лучше бы это всё переверстать... Я бы использовал таблицу, пожалуй... 1

@Hakken 0 / 0 / 0 Регистрация: 13.11.2015 Сообщений: 2
	13.11.2015, 17:43 [ТС]	3
	Переверстал. Не то что хотел, но на много лучше. Подскажите еще, для общего развития. Свойство "clear" запрещает "обтекание". Возможно ли реализовать так, что бы если страница на весь экран это свойство не работает, если страница свернута, работает. Т.е. получается блок бы смещался автоматом при сворачивании. Или такое реализуется только в JS? Простите за мои извращены представления о верстке =) 0

@Fedor92 2964 / 2620 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	13.11.2015, 18:13	4
	Hakken, я так понимаю Вы имеете ввиду разные разрешения... Как вариант на html можно попробовать реализовать подобное с помощью медиазапросов, то есть в зависимости от разрешения применять те или иные свойства к объектам на странице... 0