Сегодня
16 декабря 2018
0:40
Вход Sign In Регистрация Sign Up Забыли пароль ? Forgot password ?
VARVE - СОЗДАНИЕ ПРЕДМЕТОВ ОБСТАНОВКИ ПОМЕЩЕНИЯ
                 
подробнее...

Теги

сайты, игры, дизайн, продвижение, php, html, css, my sql, c++, delphi, photoshop, 3ds max, fl studio, трекерская музыка, уроки

Статьи сайта

Создаем Сайт Своими Руками - Экспорт/импорт данных из баз данных MySQL

Создаем Сайт Своими руками - Введение в php

Создаем Сайт Своими Руками - Выводим дату и время в формате RU

игра Веселый Буквоежка

Что нужно знать для создания сайта ? Массивы в языке php

уроки php

Уроки 3ds max

КАК СОЗДАТЬ СВОЮ ИГРУ - Веселый Буквоежка Ваше Визуальное Шоу / Fun Letter Eater You Visual Show

обзор антивирусных средств защиты

как работает антивирус ?

КАК СОЗДАТЬ СВОЮ ИГРУ - Набор разработчика игр - Нечто: Необъяснимое - в плену желаний

Как создать игру ? - Программируем сами - Самый первый шаг

Как создать игру ? - Программируем сами - Самый первый шаг - страница 2

Как создать игру ? - Программируем сами - Содержание

Как создать игру ? - Программируем сами - Самый первый шаг - страница 3

Как создать игру ? - Программируем сами - Изучаем и модифицируем пример CreateDevice

Как создать игру ? - Программируем сами - пример CreateDevice страница 2

Как создать игру ? - Программируем сами - пример CreateDevice страница 3

Как создать игру - Vertices - Вершины - страница 1

Как создать игру - пример Matrices

Уроки Photoshop - Чудеса

Уроки Photoshop - Чудеса - Коллаж от нуля

Уроки Photoshop - Чудеса - Коллаж от нуля - страница 2

Уроки Photoshop - Чудеса - Коллаж от нуля - страница 3

Уроки Photoshop - Чудеса - Коллаж от нуля - страница 4

Купить Уроки Photoshop - Чудеса

Уроки Photoshop

Уроки Photoshop - Рисуем волка из мультфильма

Уроки Photoshop - Рисуем волка из мультфильма стр 2

Уроки Photoshop - Рисуем волка из мультфильма стр 3

Уроки Photoshop - Рисуем волка из мультфильма стр 4

Уроки Photoshop - Анимируем волка из мультфильма

Уроки Photoshop - Анимируем волка из мультфильма стр 2

Уроки Photoshop - Анимируем волка из мультфильма стр 3

Уроки Photoshop - Анимируем волка из мультфильма стр 4

Эмулятор игры Ну, Погоди!

Создание сайта для бизнеса

Пример игры с исходным кодом Donuts3D

Как создать игру ВЕСЕЛЫЙ БУКВОЕЖКА - программируем сами

Как создать игру ВЕСЕЛЫЙ БУКВОЕЖКА - создаем игровую оболочку

Открытый Полный Исходный код игры Дорога в Город

Как создать игру - Веселый Единственный Буквоежка - программируем основу будущей игры

Как создать игру - Веселый Единственный Буквоежка - выводим заставку

Как создать игру - Веселый Единственный Буквоежка - игровое меню

Как создать игру - Веселый Единственный Буквоежка - движение и анимация героя

Как Создать игру ВЕБ - Веселый Единственный Буквоежка - Программируем сами

Новый взгляд на очевидные вещи

Разработка программ на c++

Немного о музыке

Уроки Photoshop - Чудеса

Купить Уроки Photoshop - Чудеса

Онлайн Обучение, Репетитор

Уроки Photoshop - Рисуем и Анимируем

Уроки Photoshop - Рисуем и Анимируем - Урок 1 - Старт

GET и POST запросы

DirectX 9c - Изучаем пример MultAnimation

megainformatic cms Система Управления Контентом

Темы для WordPress

Что нужно для создания собственного сайта ?

Макет дизайна Вашего сайта

скачать megainformatic cms

для чего нужна карта сайта

Что нужно для создания собственного сайта ?

как создать инсталлятор для собственной cms

новые идеи, новые решения

Нововведения в megainformatic cms

Web Администрирование

Уроки Верстки

Система автоматизированной е-майл рассылки

Мысли о разном

Выгрузка файла на сайт

выпадающее меню на html и css

Использование checkbox

Краеугольная особенность работы Web-form на примере смены состояния checkbox

Технологии WEB

Технологии WEB - AJAX-запросы

Легко ли быть программистом

От идеи к реализации - трудно ли создавать сайты ?

Проблемы с кодировками при отображении страниц

игра Нечто: Необъяснимое Нить Накала - "в плену желаний"

Система Автоматизации Доставки Электронных Заказов megainformatic cms e-pro

megainformatic cms e-pro Автоматизация Обработки Уведомлений о Заказах по партнерским программам

Глубины программирования на C++

VARVE: Музыкальная страничка трэкера

Создание музыки и звука

VARVE: Создание музыки и звука: урок 2

Создание музыки и звука: урок 3 - настройка Impulse Tracker для работы в WinXP

Создание музыки и звука: урок 4 - Введение в Mod Plug Tracker

Создание музыки и звука: урок 5 - Первая композиция в Mod Plug Tracker

Создание музыки в Impulse Tracker 2.14 - урок 6 - Ввод Нот

Создание музыки в Impulse Tracker 2.14 Первая мелодия

Создание музыки в Impulse Tracker 2.14 Настройка параметров сэмплов

Создание музыки и звука: теория и практика создания трэкерской музыки

Что такое VARVE ?

Основы работы в Microsoft Visual Studio 2008 и DirectX 9 (DX SDK Aug 2008)

Введение в программирование игр на С++ для платформы DirectX 9 - Первый старт

Введение в программирование игр на С++ для платформы DirectX 9 - Меняем иконку приложения

Введение в программирование игр на С++ для платформы DirectX 9 Добавляем другую модель

Введение в программирование игр на С++ для платформы DirectX 9 Программирование игр в directx. Hello, World!

Введение в программирование игр на С++ для платформы DirectX 9 Разбираем конструкции языка C++ на примере работы в Microsoft Visual Studio 2008

Разбираем конструкции языка C++ на примере работы в Microsoft Visual Studio 2008 - Урок 1 Основные операторы языка C++

Разбираем конструкции языка C++ на примере работы в Microsoft Visual Studio 2008 - Урок 1 Основные операторы языка C++ (часть 2)

Урок 2 Написание Win32-приложений. Обзор стартового кода Win32-приложения. Добавление ресурса текстовая строка

Урок 3 Создание Win32-приложений. Создание меню и простых диалоговых окон.

Урок 4 Создание Win32-приложений. Стандартные диалоги. Изучение сопутствующих конструкций языка. Консольные Win32-приложения. Указатели. Ссылочный тип. Массивы.

Урок 4 часть 2 Win32. Диалог выбора цвета, смена цвета фона окна приложения

Написание приложения DirectX9c + MFC в среде MSVS 2005

Создание компьютерных игр на основе DirectX в среде Delphi 6, 7

Создание компьютерных игр на основе DirectX в среде Delphi 6, 7 - Почему избраны DX8 и Delphi ?

Основы IDirectMusic8 в среде Delphi6-7

Основы DirectInput8 в среде Delphi 7

Основы DirectSound8 в среде Delphi6-7

Плагин для 3DS MAX из DX9 SDK

Мастер-класс: Создание модели и текстуры Коммандного Центра (как в StarCraft 2)

Мастер-класс: Создание модели и текстуры Коммандного Центра (как в StarCraft 2) Часть 2

Мастер-класс: Создание модели и текстуры Коммандного Центра (как в StarCraft 2) Часть 3

Что нужно знать для создания сайта ? float - использование в css - стилях

[к содержанию]

Атрибут float применяется для выравнивания блоков div по

<div style="float: left;">по левому краю отведенного пространства страницы</div>


по левому краю отведенного пространства страницы



<div style="float: right;">по правому краю отведенного пространства страницы</div>


по правому краю отведенного пространства страницы



<div>без выравнивания</div>


без выравнивания



аналогично объявляется в виде атрибута для описанного в css - файле класса или id

<style>
.element1 {
float: left; border: 1px solid #000000; background: #75ab41;
}


#element_2 {
float: right; border: 1px solid #000000; background: #75ab41;
}


</style>

<div class="element1">по левому краю отведенного пространства страницы</div>


<div id="element_2">по правому краю отведенного пространства страницы</div>


еще один пример -



<style>
.element1 {
float: left; border: 1px solid #000000; background: #75ab41;
}

#element_2 {
float: right; border: 1px solid #000000; background: #75ab41;
}

#elem_3 {
width: 400px;
background: #ffff00;
}

#elem_3 .elem_4 {
border: 1px solid #000000; background: #75ab41; width: 200px;
}

#elem_3 .elem_5 {
float: left; border: 1px solid #000000; background: #EC64FF; width: 200px;
}

#elem_3 .elem_6 {
float: right; border: 1px solid #000000; background: #6C87F1; width: 200px;
}
</style>

<div class="element1">по левому краю отведенного пространства страницы</div><br><br><br>

<div id="element_2">по правому краю отведенного пространства страницы</div><br><br><br>

<div id="elem_3">
<div class="elem_4">
какой-то текст в блоке без float
</div>

<div class="elem_5">
другой текст - float: left;
</div>

<div class="elem_4" style="background: #ff0000;">
снова текст в блоке без float
</div>

<div class="elem_4" style="background: #00ff00;">
и еще текст в блоке без float
</div>

<div class="elem_6">
теперь текст в блоке float: right;
</div>

</div>

<br><br><br>

<div style="clear: both;"></div>

а вот как он выводится -

по левому краю отведенного пространства страницы



по правому краю отведенного пространства страницы



какой-то текст в блоке без float
другой текст - float: left;
снова текст в блоке без float
и еще текст в блоке без float
теперь текст в блоке float: right;



В показанном примере видно как ведут себя блоки div имеющие или не имеющие тот или иной тип выравнивания блока с атрибутом float.

Важно запомнить всего 2 важных момента:

1) Если блоки не имеют указанного атрибута float - то они выводятся "как есть" - занимая всё отведенное им пространство и очередной блок будет помещен ниже данного;

2) Если вам требуется очистить пространство, занимаемое любыми блоками - примените атрибут clear: both; как показано в примере выше.

далее

[к содержанию]

 

Оставленные комментарии



Рейтинг@Mail.ru
Время загрузки: 0,1481