<MyRusakov.ru />

Создание игр на Unreal Engine 5

Создание игр на Unreal Engine 5

Данный курс научит Вас созданию игр на Unreal Engine 5. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.

В курсе Вы получите всю необходимую теоретическую часть, а также увидите массу практических примеров. Дополнительно, почти к каждому уроку идут упражнения для закрепления материала.

Помимо самого курса Вас ждёт ещё 8 бесплатных ценных Бонусов: «Chaos Destruction», «Разработка 2D-игры», «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства», «Создание прототипа RPG с открытым миром» и и весь курс «Создание игр на Unreal Engine 4» (актуальный и в 5-й версии), включающий в себя ещё десятки часов видеоуроков.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Частичная отмена float в CSS

Частичная отмена float в CSS

В этой статье я решил разобрать одну проблему, которая иногда встречается при вёрстке, и при этом в Интернете найти её решение очень трудно. В этой статье мы разберём проблему частичной отмены float в CSS, а так же я Вам покажу её решение.

Итак, давайте разберём вот такой код:

<div id="left">Левые блоки</div>
<div id="right">
  <img src="images/img.jpg" alt="" />
  <p>Текст статьи</p>
  <div style="clear: both;"></div>
  <p>Автор: Иван Иванов; Раздел: CSS</p>
</div>

И CSS-код:

#left {
  border-right: 5px solid #000;
  float: left;
  height: 400px;
  width: 200px;
}
#right {
  margin-left: 220px;
}
#right img {
  float: left;
}

Какая была наша задача? Сделать 2 колонки: в левой колонке есть какой-то контент, в правой колонке есть статья. И у этой статьи есть картинка с float: left; (как и у левого блока). Затем мы хотим вывести блок с информацией о статье, безусловно, мы не хотим, чтобы эта информация была справа от картинки. Поэтому добавляем clear-блок. Однако, тут нас ждёт сюрприз.

Отменилось не только float: left; у картинки, но и у левого блока. Таким образом, информация о статье ушла вниз, поравнявшись с нижней границей левого блока (поскольку он выше). Как решить эту проблему? Очень просто, достаточно в блок #right добавить свойство overflow:

#right {
  margin-left: 220px;
  overflow: hidden;
}

Теперь всё встало на свои места. Свойство overflow отвечает за отображение того, что находится за пределами блока. И hidden сообщает, что будет отображаться лишь то, что находится внутри блока, а всё остальное будет скрыто. Именно это свойство и значение позволяет нам решить проблему с частичной отменой float в CSS.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (6):

mike124 mike124 18.02.2014 22:05:02

Пример неудачный - у меня что с overflow: hidden;, что без оного отображается нормально. Пробовал в IE9, Опера, FF и Хром.

Ответить

rysich rysich 19.02.2014 01:32:06

Кажется это материал из разряда "хак". Overflow это отображение внутреннего контента, а float это обтекание и позиционирование, и они вообще никак не связаны между собой. Чтобы нормально отображались колонки, нужно верстать нормальный многоколоночный макет, хотя бы так как у Мержевича: http://htmlbook.ru/layout А не заниматься сомнительными хаками.

Ответить

sinkill sinkill 19.02.2014 01:53:22

где ты здесь вообще хаки увидел? :D

Ответить

Maks4ever Maks4ever 02.01.2015 18:27:02

не очень понятно как это сработало может действительно для подписи к картинке стоило добавить отдельный блок

Ответить

Tanya1 Tanya1 05.01.2015 17:02:10

Михаил, если сможете подскажите:если читать описание значения "hidden": "Отображается только область внутри элемента, остальное будет скрыто".Но в нашем случае как раз нет границы элемента, за которой все должно быть скрыто.И содержимое как раз не скрывается при "hidden", а подтягивается.Значит перевод спецификации не полный, не описываются все особенности свойства?

Ответить

aio350 aio350 08.01.2019 11:00:12

можно сделать проще <div id="right"> <img src="images/img.jpg" alt="" /> <p>Текст статьи</p> </div> <p style="position: absolute; top: 400px; left: 225px;">Автор: Иван Иванов; Раздел: CSS</p>

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.