Выравнивание плавающих элементов

Здравствуйте! Рассмотрим некоторые проблемы при создании макетов страниц с использованием свойства float. При работе с плавающими элементами и свойством float довольно часто можно столкнуться с проблемой выпадения из страницы плавающих элементов. У этой проблемы есть различные аспекты и их решения. Рассмотрим эти аспекты.

Например, пусть у нас задан следующий блок:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная верстка в HTML5</title>
        <style>
            #sidebar{
                float: left;
                width: 25%;
                padding: 10px;
            }
            #main{
                border-left: 1px solid #ccc;
                width:75%;
                padding: 15px;
                margin-left: 25%;
            }
        </style>
    </head>
    <body>
        <div id="sidebar">
            <h2>The standard Lorem Ipsum passage</h2>
            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore...</p>
        </div>
        <div id="main">
            <h2>What is Lorem Ipsum?</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
            <p>Contrary to popular belief, Lorem Ipsum is not simply random text..</p>
        </div>
    </body>
</html>

Читать далее

Вступите в группу, и вы сможете просматривать изображения в полном размере

		Это интересно 0	Как всё будет выглядеть в блоге: Выравнивание плавающих элементов Здравствуйте! Рассмотрим некоторые проблемы при создании макетов страниц с использованием свойства float Скопируйте код для блога: <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/uchim-html/13853966/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;"> Выравнивание плавающих элементов </a> <div class="insert-intro" style="font-family:trebuchet MS;">Здравствуйте! Рассмотрим некоторые проблемы при создании макетов страниц с использованием свойства float </div> </div> Выравнивание плавающих элементов <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/uchim-html/13853966/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;">Выравнивание плавающих элементов</a> <div style="font-family:trebuchet MS;">Здравствуйте! Рассмотрим некоторые проблемы при создании макетов страниц с использованием свойства float </div> </div>

webguru

14.06.2017

В избранное Пожаловаться Просмотров: 290

Комментарии ⁰

Учим HTML 56

Активные участники:

Последние откомментированные темы:

Выравнивание плавающих элементов

Комментарии временно отключены

Премодерируемое участие
934 участника