Форум на Kuban.ru (http://forums.kuban.ru/)
-   Веб-дизайн и программирование (http://forums.kuban.ru/f1030/)
-   -   Как отключить Float: left;? (http://forums.kuban.ru/f1030/kak_otklyuchit-_float_left%3B-8998233.html)

kkk6kkk 15.12.2019 21:20
Как отключить Float: left;?
 
Посмотрите, пожалуйста, файл странички.

Я включил 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>

SanekSp 16.12.2019 15:39
Надо писать не div - float: left;
A создать класс, например - .box_img1 {width: 200px; float: left;**
И тогда в html, для картинок будет <div class="box_img1">...</div> а для текста просто <div>...</>
Вот и ВСЕ - ПРОБЛЕМКА решена :) !!!

Искусственный Интеллект1 16.12.2019 16:52
Все элементы содержащие float: left; можно поместить в див со свойством overflow: hidden; или же после всех элементов содержащих float:left; можно добавить еще один див со свойством clear: both;
Подробнее смотрите
[url]https://habr.com/ru/post/48383/[/url]
[url]http://www.css-tricks.ru/articles/css/all-about-floats[/url]

Искусственный Интеллект1 16.12.2019 16:54
Еще одна интересная статья
[url]https://learn.javascript.ru/float[/url]
довольно подробно все написано.

SanekSp 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 точек ???

Искусственный Интеллект1 16.12.2019 23:31
4-AlexIT > я вам не противоречил :) Нужно прописать классы для дивов и очистить поток (отменить float), прописав для классов нужные свойства :)

SanekSp 17.12.2019 04:16
5-Искусственный Интеллект1 >Там проблема не в ПОТОКАХ, а в полном незнании HTML и CSS - ну посудите сами!
Какой (даже школьник) мог такое написать - <style type="text/css">
Полное не понимание Тегов и его свойств!!!
Тег <style> уже обозначает - что дальше идет описание стилей в формате "text/css", до закрытия тега </ !!!

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

А вообще то ВСЁ плачевно - Студент взялся сделать САЙТ за 3 рубля, А ТЯМУ не хватает !!!
Люди ДОБРЫЕ не платите Трешку СТУДЕНТАМ - платите ПЯТНАШКУ в месяц - простым ЧЕЛОВЕЧКАМ (которые хотя бы знают HTML и CSS) И будет Вам СЧАСТЬЕ!!!

Искусственный Интеллект1 17.12.2019 14:14
6-AlexIT > возможно человек учиться, я написал статьи, которые помогут разобраться с заданным вопросом. Понемногу автор освоит разработку сайтов :)

berezkin 17.12.2019 22:42
Ему нужно без использования css ))
[url]https://qna.habr.com/q/693538[/url]

Искусственный Интеллект1 17.12.2019 23:42
8-Берёзкин > наверное сложно автору освоить css :)

gameloop 30.01.2020 20:17
[URL="https://www.gameloop.me/brawl-stars-on-pc/"]brawl stars pc[/URL]

[URL="https://www.laptopfunda.com/laptops-with-thunderbolt-3/"]cheapest laptops with thunderbolt 3[/URL]

[URL="https://www.saeedhub.us/official-kmspico/"]KMSpico[/URL]
[URL="https://www.ithubpk.com/best-ssd-for-gaming/"]Best cheap SSD For Gaming[/URL]

[URL="https://www.tencentgamingbuddy.co/gameloop/download-bluestacks-windows10/"]download bluestacks[/URL]

[URL="https://ultimateelectricshavers.com/"]best electric shavers for men[/URL]


Текущее время: 08:16. Часовой пояс GMT +3.