К списку форумов К списку тем
Регистрация    Правила    Главная форума    Поиск   
Имя: Пароль:
Реклама на Кубаньру
Рекомендовать в новости

Как отключить Float: left;?

0 - 15.12.2019 - 21:20
Посмотрите, пожалуйста, файл странички.

Я включил Float: left чтобы каждая следующая картинка с подписью снизу крепилась рядом. Картинки кончились. Остальной текст должен располагаться ниже картинок, а от так же "клеится" рядом. Как поправить?

Текст HTML дока:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Каталог</title>
<style type="text/css">
div **
width: 200px;
float: left;
**

</style>
</head>

<body>
<header>
<nav>
<ul>
<li><a href="Index.html">Главная</a></li>
<li>Каталог</li>
<li><a href="Contacts.html">Контакты</a></li>
</ul>
</nav>
<hr>
<h1 align="center">Каталог</h1>
</header>
<section>
<div>
<a href="img/izolyat.jpg" target="_blank" title="Крупнее"><img src="img/izolyat.jpg" width="200" alt="Фото Изолят, 1кг"></a>
<p align="center">
<a href="#p1" title="Характеристики">Изолят, 1кг</a>
</p>
</div>
<div>
<a href="img/izolyat2.jpg" target="_blank" title="Крупнее"><img src="img/izolyat2.jpg" width="200" alt="Фото Изолят, 2кг"></a>
<p align="center"><a href="#p2" title="Характеристики">Изолят, 2кг</a></p>
</div>
<div>
<a href="img/Protein.jpg" title="Крупнее" target="_blank"><img src="img/Protein.jpg" width="200" alt="Фото Протеин"></a>
<p align="center"><a href="#p3">Протеин</a></p>
</div>
</section>
<section>
<h2 align="center">Характеристики товаров</h2>
<h6 align="right">(отработка навыков использования "Якорей")</h6>
<p id="p1"></p>
<h3>Изолят, 1кг</h3>
Текст характеристики Текст характеристики<br>
<a href="Catalog.html">В начало</a>
<hr>
<p id="p2"></p>
<h3>Изолят, 2кг</h3>
Текст характеристики Текст характеристики <br>
<a href="Catalog.html">В начало</a>
<hr>
<p id="p3"></p>
<h3>Протеин</h3>
Текст характеристики Текст характеристики <br>
<a href="Catalog.html">В начало</a>
<hr>
</section>
<footer>
<h4 align="center">&copy;Все права защищены.</h4>
</footer>
</body>

</html>



1 - 16.12.2019 - 15:39
Надо писать не div - float: left;
A создать класс, например - .box_img1 {width: 200px; float: left;**
И тогда в html, для картинок будет <div class="box_img1">...</div> а для текста просто <div>...</>
Вот и ВСЕ - ПРОБЛЕМКА решена :) !!!
2 - 16.12.2019 - 16:52
Все элементы содержащие float: left; можно поместить в див со свойством overflow: hidden; или же после всех элементов содержащих float:left; можно добавить еще один див со свойством clear: both;
Подробнее смотрите
https://habr.com/ru/post/48383/
http://www.css-tricks.ru/articles/css/all-about-floats
3 - 16.12.2019 - 16:54
Еще одна интересная статья
https://learn.javascript.ru/float
довольно подробно все написано.
4 - 16.12.2019 - 22:56
2-Искусственный Интеллект1 > Они итак всем ДИВАМ назначили width: 200px; float: left; причем для всей Страницы - даже если это код Фрэйма!!!
Браузер не Дурак - и по этому последнюю команду он воспринимает как инструкцию к ДЕЙСТВИЮ !!!
Попробуйте в стилях описать - div {width: 200px; float: left;**
А потом в коде HTML написать <div style="width: 100%; float:none">....</div>
Ну и как у Вас развернется последний ДИВ - на всю страницу или всего на 200 точек ???
5 - 16.12.2019 - 23:31
4-AlexIT > я вам не противоречил :) Нужно прописать классы для дивов и очистить поток (отменить float), прописав для классов нужные свойства :)
6 - 17.12.2019 - 04:16
5-Искусственный Интеллект1 >Там проблема не в ПОТОКАХ, а в полном незнании HTML и CSS - ну посудите сами!
Какой (даже школьник) мог такое написать - <style type="text/css">
Полное не понимание Тегов и его свойств!!!
Тег <style> уже обозначает - что дальше идет описание стилей в формате "text/css", до закрытия тега </ !!!

Далее вообще БРЕД - Всем Дивам на странице назначают 200 пикселей и РАВНЯТЬСЯ влево!!!
А потом хотят чтобы текст куда то попытался сбежать!!!
И кстати картинке тоже 200 !!!
Ну хотя бы для приличия Диву дали 210 + отступ (margin) 5 пикселей - ну так чтобы не ТОЛКАЛИСЬ друг с другом :)

А вообще то ВСЁ плачевно - Студент взялся сделать САЙТ за 3 рубля, А ТЯМУ не хватает !!!
Люди ДОБРЫЕ не платите Трешку СТУДЕНТАМ - платите ПЯТНАШКУ в месяц - простым ЧЕЛОВЕЧКАМ (которые хотя бы знают HTML и CSS) И будет Вам СЧАСТЬЕ!!!
7 - 17.12.2019 - 14:14
6-AlexIT > возможно человек учиться, я написал статьи, которые помогут разобраться с заданным вопросом. Понемногу автор освоит разработку сайтов :)
8 - 17.12.2019 - 22:42
Ему нужно без использования css ))
https://qna.habr.com/q/693538
9 - 17.12.2019 - 23:42
8-Берёзкин > наверное сложно автору освоить css :)
10 - 30.01.2020 - 20:17
brawl stars pc

cheapest laptops with thunderbolt 3

KMSpico
Best cheap SSD For Gaming

download bluestacks

best electric shavers for men


К списку вопросов
Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск




Copyright ©, Все права защищены