Главные новости

Позиционирование элементов в css html

Позиционирование элементов в css html
Что отвечает за вывод позиции. За вывод позиции отвечает расположение элементов друг за другом.
Простой пример html
<html>
<head>
<title>Позиционирвоание элементов в html на примере div</title>
</head>
<body>
<div class="proizvolniy"><img src="../image/galery/X_Men_Apocalypse.jpg" alt="Люди x апокалипсис" title="Люди x апокалипсис" width="230" height="339">Просто произвольный набор текста для примера.<br> Текст набран случайно и так чтобы показать как будет отображаться вывод того или иного свойства css и его параметров к данному классу. <br>Все что необходимо знать и как это будет выглядеть в результате примера чуть ниже </div>
Результат:
Люди x апокалипсисПросто произвольный набор текста для примера.
Текст набран случайно и так чтобы показать как будет отображаться вывод того или иного свойства css и его параметров к данному классу.
Все что необходимо знать и как это будет выглядеть в результате примера чуть ниже

Как видите как расположили в div с текстом и картинкой так они и вывелись в html (не красиво конечно но это всеголишь пример), а вот css может выести даннй вид к более красивому исполнению например мы хотим видеть позицию картинки в левом углу, а текст должен её обтекать со всех сторон то это делается так
Мне пришлось изменить название класса в нижнем примере для того чтобы два одинаковых примера смогли вывестись по разном в данном уроке
<html>
<style>div.proizvolniy1 img{float:left; margin:0px 10px 10px 0px;}div.proizvolniy1{min-height:339px;}</style>
<head>
<title>Позиционирвоание элементов в html на примере div</title>
</head>
<body>
<div class="proizvolniy1"><img src="../image/galery/X_Men_Apocalypse.jpg" alt="Люди x апокалипсис" title="Люди x апокалипсис" width="230" height="339">Просто произвольный набор текста для примера.<br> Текст набран случайно и так чтобы показать как будет отображаться вывод того или иного свойства css и его параметров к данному классу. <br>Все что необходимо знать и как это будет выглядеть в результате примера чуть ниже </div>
Результат:
Люди x апокалипсисПросто произвольный набор текста для примера.
Текст набран случайно и так чтобы показать как будет отображаться вывод того или иного свойства css и его параметров к данному классу.
Все что необходимо знать и как это будет выглядеть в результате примера чуть ниже
 
Итак что мы зделали в данном примере мы придали 2 стиля картинке в нужном классе, а именно позиционирование по левому краю с помощью float:left и задали картинке оступы с помощью margin и задали высоту div минимальную иначе последующий снизу текст мог бы попасть внутрь данного текста и все бы слиплось и было некрасивым. Вам надо также выбрать определенный размер картинки чтобы регулировать одинаковый вывод например для нескольких таких статей

Надеюсь вы уже знаете что делают данные свойства, если нет то вы можете вбить в поисковик их например float:left css или margin css и прочесть.
Аналогично мы могли придать значение float:right и так далее. Не бойтесь эксперементировать. Самое главное это научиться делать то что необходимо для вывода поставленной задачи и применять для этого те или иные стили css.