Задать вопрос
@maks_monakhov
html

Почему при открытии html страницы картинки сбиваются в один ряд хотя я прописал в css что они должны быть в 4 ряда по 3 штуки в каждом, хелпаните?

<!DOCTYPE html>
<html>

<body>

<div class="header">

<p>Лувр</p>

</div>

<div class="content">

<div class="photorow">

<div class="photo">

<p><img src="https://delo.ua/files/news/images/3654/58/picture2_epidemija-koronav_365458_p0.jpg" alt="альтернативный текст" width="200" height="220" ></p>

<p>Лувр</p>

</div>

<div class="photo">

<p><img src="https://delo.ua/files/news/images/3654/58/picture2_epidemija-koronav_365458_p0.jpg" width="200" height="220" ></p>

<p>Лувр</p>

</div>

<div class="photo">

<p><img src="https://delo.ua/files/news/images/3654/58/picture2_epidemija-koronav_365458_p0.jpg" width="200" height="220" ></p>

<p>Лувр</p>

</div>
</div>

<div class="photorow">

<div class="photo">

<p><img src="https://delo.ua/files/news/images/3654/58/picture2_epidemija-koronav_365458_p0.jpg" width="200" height="220" ></p>

<p>Лувр</p>

</div>

<div class="photo">

<p><img src="https://delo.ua/files/news/images/3654/58/picture2_epidemija-koronav_365458_p0.jpg" width="200" height="220" ></p>

<p>Лувр</p>

</div>

<div class="photo">

<p><img src="https://delo.ua/files/news/images/3654/58/picture2_epidemija-koronav_365458_p0.jpg" width="200" height="220" ></p>

<p>Лувр</p>

</div>


</div>

<div class="photorow">

<div class="photo">


<p><img src="https://delo.ua/files/news/images/3654/58/picture2_epidemija-koronav_365458_p0.jpg" width="200" height="220" ></p>

<p>Лувр</p>

</div>

<div class="photo">

<p><img src="https://delo.ua/files/news/images/3654/58/picture2_epidemija-koronav_365458_p0.jpg" width="200" height="220" ></p>

<p>Лувр</p>

</div>

<div class="photo">

<p><img src="https://delo.ua/files/news/images/3654/58/picture2_epidemija-koronav_365458_p0.jpg" width="200" height="220" ></p>

<p>Лувр</p>

</div>

</div>

<div class="photorow">

<div class="photo">

<p><img src="https://delo.ua/files/news/images/3654/58/picture2_epidemija-koronav_365458_p0.jpg" width="200" height="220" ></p>

<p>Лувр</p>

</div>

<div class="photo">

<p><img src="https://delo.ua/files/news/images/3654/58/picture2_epidemija-koronav_365458_p0.jpg" width="200" height="220" ></p>

<p>Лувр</p>

</div>

<div class="photo">

<p><img src="https://delo.ua/files/news/images/3654/58/picture2_epidemija-koronav_365458_p0.jpg" width="200" height="220" ></p>

<p>Лувр</p>

</div>

</div>

</div>

</body>

</html>

*{

margin:0;

padding:0;

}

.header {

height:400px;

width:100%;

text-align:left;

background: url(https://www.thisiscolossal.com/wp-content/uploads/2019/06/tsubaki-12.jpg) centerno-repeat;

background-color: #000;

margin-bottom: 10px;

}

.header p{

color:#fff;

padding-left: 10px;

padding-top:150px;

font-family:Georgia, 'TimesNewRoman', Times, serif;

text-transform:uppercase;

font-weight: bold;

font-size: 72px;

letter-spacing:20px;

}

.content {

height: 800px;

text-transform:capitalize;

text-align:justify;

color:#000000;

font-family: Georgia, 'TimesNewRoman', Times, serif;

line-height: 1.5;

padding-bottom: 50 px;

}

.footer {

background-color: #47565A;

margin-top: -50px;

width: 100%;

height: 50px;

text-transform:uppercase;

font-family: Georgia, 'TimesNewRoman', Times, serif;

color:#ffffff;

font-size:14px;

padding-top:27px;

}

.footer p {

color:#ffffff;

text-align:center;

}

.footer p:hover {

color: #bbb;

}

.photorow{

margin-left: 170px;

}

.photo{

margin-right: 10px;

float:left;

width:200px;

padding-left:30px;

}

.box{

}

p{

text-align:center;

}

@media screen and (max-width: 480px) { /* разрешение смартфона */

    h1 {

        min-width: 320px;

        font-size: 16px;

    }

    div.image_gallery {

        width: 320px;

        min-width: 320px;

    }

    img {

        max-width: 98%;

        height: auto;

        padding: 1%; /* небольшие оступы для изображений */

    }

}/* прошлый CSS */

h1 {}

div.image_gallery {}

img {}


@media screen and (max-width: 768px) { /* разрешение планшета */

    h1 {

        font-size: 20px;

    }

    div.image_gallery {

        min-width: 320px;

    }

    img {

        max-width: 48%; /* 2 изображения в ряд */

        height: auto;

        padding: 1%; /* небольшие оступы для изображений */

    }}
  • Вопрос задан
  • 76 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Почему

Потому что float нужно использовать для обтекания одного элемента другим. Например, чтобы картинка обтекалась текстом.
А вовсе не для сеток.

Для сеток придуманы флексы (https://jsfiddle.net/pc4tyex8/) и гриды.
И, кстати, тогда можно будет избавиться от лишних оберток photorow

p.s. margin-left: 170px; не поставит блок по центру страницы. Используйте margin: 0 auto.
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Изменить код STM32 и конфигурацию сервиса удаленного доступа
25 нояб. 2024, в 08:57
5000 руб./за проект
Доработать готовый проект по миниатюризации компактного НО
25 нояб. 2024, в 08:40
10000 руб./за проект
Восстановить работу связки парсер и Telegram bot на сайте Wordpress
25 нояб. 2024, в 08:28
8000 руб./за проект
Ещё заказы