| 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">©Все права защищены.</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 :) | |
Интернет-форум Краснодарского края и Краснодара |
