Как добавить div по горизонтали, пока ширина не станет больше? - PullRequest
Новая
       1

Как добавить div по горизонтали, пока ширина не станет больше?

0 голосов
/ 28 августа 2018

Я хочу добавить плитку по горизонтали, пока не появится свободное место по горизонтали. Затем он должен автоматически перейти ко второй строке / строке.

он также должен реагировать на различный размер экрана. Мой начальный код, как показано ниже: 

.tile {
  width: 248px;
  height: 126px;
  background-color: #e4e4e4;
  margin: 17px;
}

.title {
  display: block;
  float: left;
  padding-left: 13px;
  font-size: 20px;
  padding-top: 8px;
}
<div class="tile">
  <label class="title">Tile1</label>
</div>
<div class="tile">
  <label class="title">Tile2</label>
</div>
<div class="tile">
  <label class="title">Tile3</label>
</div>
<div class="tile">
  <label class="title">Tile4</label>
</div>
<div class="tile">
  <label class="title">Tile5</label>
</div>
<div class="tile">
  <label class="title">Tile6</label>
</div>
<div class="tile">
  <label class="title">Tile7</label>
</div>
<div class="tile">
  <label class="title">Tile8</label>
</div>
<div class="tile">
  <label class="title">Tile9</label>
</div>

Я хочу плитки 1,2,3 в первом ряду, затем 4,5,6 во втором ряду и т. Д. отзывчивым способом. (это просто пример, количество плиток в одном ряду должно автоматически настраиваться (размер плитки фиксирован) по ширине страницы).

Как этого добиться (без javascript)?

Ответы [ 2 ]

0 голосов
/ 28 августа 2018

файл css 

.flex{
  display:flex;
  justify-content: space-around;
align-items:center;
  flex-flow: row wrap;
}

HTML-код 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="flex">
<div class="tile">
  <label class="title">Tile1</label>
</div>
<div class="tile">
  <label class="title">Tile2</label>
</div>
<div class="tile">
  <label class="title">Tile3</label>
</div>
<div class="tile">
  <label class="title">Tile4</label>
</div>
<div class="tile">
  <label class="title">Tile5</label>
</div>
<div class="tile">
  <label class="title">Tile6</label>
</div>
<div class="tile">
  <label class="title">Tile7</label>
</div>
<div class="tile">
  <label class="title">Tile8</label>
</div>
<div class="tile">
  <label class="title">Tile9</label>
</div>
  </div>
</body>
</html>

ИСПОЛЬЗОВАНИЕ ЭТОГО CSS делает его отзывчивым в зависимости от увеличения ширины и добавления дополнительных "<div class="flex"></div>", пожалуйста, обратите внимание ...

0 голосов
/ 28 августа 2018

Этого можно добиться, используя свойство flex-wrap в css, которое работает даже при изменении размера окна браузера ( отзывчивый ), как показано ниже: 

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: green;
}

.flex-container > div {
  background-color: #e4e4e4;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div>Tile 1</div>
  <div>Tile 2</div>
  <div>Tile 3</div>  
  <div>Tile 4</div>
  <div>Tile 5</div>
  <div>Tile 6</div>  
  <div>Tile 7</div>
  <div>Tile 8</div>
  <div>Tile 9</div>  
  <div>Tile 10</div>
  <div>Tile 11</div>
  <div>Tile 12</div>  
</div>

<p>Try resizing the browser window.</p>

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

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

...