3 изображения не выровнены по горизонтали при использовании CSS и HTML - PullRequest
Новая
       1

3 изображения не выровнены по горизонтали при использовании CSS и HTML

0 голосов
/ 24 марта 2020

Я пытаюсь внедрить три изображения по горизонтали на сайт HTML. Однако когда я форматирую его, используя CSS, ничего не происходит, я очень растерялся, так как теоретически это должно работать. Я был бы очень признателен, если бы кто-нибудь мог мне помочь, спасибо.

HTML часть изображения страницы: 

</p>
<div class="row">
  <div class="column">
    <img src="gosportSunset.jpg" alt="Sunset" style="width:33%">
  </div>
  <div class="column">
    <img src="gosport.jpg" alt="Gosport" style="width:33%">
  </div>
  <div class="column">
    <img src="gosportRace.jpg" alt="Race" style="width:33%">
  </div>
</div>
</p>

CSS часть форматирования изображения: 

/* Three image containers  */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}

Ответы [ 2 ]

1 голос
/ 24 марта 2020

Если сетка не работает, попробуйте добавить box-sizing: border-box; в .column

.column {
   float: left;
   width: 33.33%;
   padding: 5px;
   box-sizing:border-box;  // important
}
0 голосов
/ 24 марта 2020

Вместо использования структуры div вы можете попробовать что-то с ul & li, а также использовать свойство "column-count", с помощью которого вы можете определить количество столбцов в горизонтальной строке.

См. ссылка для более полного понимания свойства "column-count": https://www.w3schools.com/cssref/css3_pr_column-count.asp

<!DOCTYPE html>
<html>
<head>
<style>
ul {
	column-count: 3;
	list-style: none;
}
</style>
</head>
<body>
<div class="row">
  <ul>
  <li>
    <img src="gosportSunset.jpg" alt="Sunset "/>
  </li>
  <li>
    <img src="gosport.jpg" alt="Gosport" />
  </li>
  <li>
    <img src="gosportRace.jpg" alt="Race" />
  </li>
  </ul>
</div>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...