Why, when opening the html page, the pictures are merged into one row, although I wrote in css that they should be in 4 rows of 3 pieces in each, help?

M

maks_monakhov2020-12-09 15:22:54

css

maks_monakhov, 2020-12-09 15:22:54

<!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%; /* небольшие оступы для изображений */

    }}

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

A

Ankhena, 2020-12-09
@maks_monakhov

Why

Because float needs to be used to wrap one element around another. For example, to wrap a picture with text.
But not for grids.
For grids, flexes ( https://jsfiddle.net/pc4tyex8/ ) and grids were invented.
And by the way, then it will be possible to get rid of extra wrappers photorow
ps margin-left: 170px;will not put the block in the center of the page. Usemargin: 0 auto.

N

Nikita Tratorov, 2017-06-09
@NikitaTratorov

If the bundle is Exim + Dovecot, then the following will help.
Here is such a router (placed higher than the others)

save_sent:
  debug_print = "R:saving sent for [email protected]$domain"
  domains = ! +local_domains
  driver = accept
  unseen
  transport = dovecot_delivery_sent

And here is such a transport (it doesn’t matter where in the transport section):

dovecot_delivery_sent:
  driver = pipe
  command = /usr/lib/dovecot/dovecot-lda -d $sender_address -f $sender_address -m "Sent"
  message_prefix =
  message_suffix =
  delivery_date_add
  envelope_to_add
  return_path_add
  log_output
  user = mail
  group = mail
  temp_errors = 64 : 69 : 70: 71 : 72 : 73 : 74 : 75 : 78

If you do not have dovecot, then Exim can quite independently add letters to mbox or Maildir, just rewrite the transport for yourself.
As a result, all messages that fall under the specified conditions of the router will fall into this transport, and then pass on and be routed as usual.