Сообщения без ответов | Активные темы


Список форумов » Специализированные форумы » Программирование

Часовой пояс: UTC + 3 часа




Начать новую тему Новая тема / Ответить на тему Ответить  Сообщений: 3 
  Пред. тема | След. тема 
В случае проблем с отображением форума, отключите блокировщик рекламы
Автор Сообщение
  microfon25

Junior
Статус: Не в сети
Регистрация: 03.07.2015
Здравствуйте
Подскажите пожалуйста почему при ориентации float:left дочерние элементы находятся не в родительном, "выезжают" из него. В чем ошибка?
_______________________

<html>
<head>
<meta charset="utf-8"></meta>
<title> Title </title>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="menu.css"></link>
</head>
<body>
<div class="menu">
<div class="menu top" >
<div class="menu top elements"><img src="telejka.jpg"></img>
</div>
<div class="menu top elements"> lorem ipsum
</div>
</div>
<div class="menu bottom">
<div id="elements">0</div>
<div id="elements">0</div>
<div id="elements">0</div>
</div>
</div>


</body>
</html>

____________________

.menu{
width: auto ;
margin:50px 50px;
background: #ccc;
border: 2px dotted;

}
.menu.top{
display: block;
vertical-align: middle;
margin: 30px ;
border:2px dotted yellow;
}
.menu.top.elements{
display:inline-block;
border:2px dotted ;
margin:10px;
}
.menu.bottom{
display:block;
margin:30px;
vertical-align:middle;
border:2px dotted turquoise;
}
#elements {
background: #f1034c;
/*display:inline;*/
float:left;
width:33%;

}
Реклама

Партнер
  agressorvt

Member
Статус: Не в сети
Регистрация: 18.11.2012
Почитайте и изучите основательно про позиционирование элементов, это(float:) является важной частью CSS, мануалов в сети полно.
  med1vh

Member
Статус: Не в сети
Регистрация: 12.01.2007
Откуда: оттуда
1) Элементы с id="elements" может быть только один на странице, почитайте что такое "id", его выгодно использовать только для "якорей" на странице и для элементов формы, если надо привязать <label> к <input>.
2) Чтобы элементы не "вылезали", вам надо в CSS-правилах сделать "распорку" для контейнера этих элементов:
имя-контейнера::after {
content: "";
display: table;
clear: both;
}
Не применяйте это просто так, почитайте внимательно про проблемы с раскладкой на float-элементах, на inline-block. Потом со временем еще очень советую добраться до flexbox и grid.
Если сами в интернете не найдете нужного, попробуйте пройти бесплатную часть курсов htmlacademy
Показать сообщения за:  Поле сортировки  
Начать новую тему Новая тема / Ответить на тему Ответить  Сообщений: 3 
-

Список форумов » Специализированные форумы » Программирование

Часовой пояс: UTC + 3 часа


Кто сейчас на конференции

Сейчас этот форум просматривают: Bing [Bot] и гости: 2

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Перейти:  
Создано на основе phpBB® Forum Software © phpBB Group
Русская поддержка phpBB | Kolobok smiles © Aiwan