Я масштабирую несколько делений, и у меня есть один, который больше, чем другие по ширине и высоте, остальные деления, которые после этого слишком малы, не выровнены по одной линии.

Примечание. Выполните приведенный ниже код на полной странице , следуя коду:

body {
    background-color: #2E5173;
}

div {
    border-radius: 10px;
    background-color: white;
    margin: 10px;
    width: 240px;
    height: 250px;
    display: inline-block;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
}

.big {
    width: 508px;
    height: 508px;
}
<div class="">&nbsp;</div>
	<div class="">&nbsp;</div>
	<div class="">&nbsp;</div>
	<div class="">&nbsp;</div>
	<div class="">&nbsp;</div>
	<div class="">&nbsp;</div>
	<div class="">&nbsp;</div>
	<div class="">&nbsp;</div>
	<div class="big">&nbsp;</div>
	<div class="">this div is very low</div>
	<div class="">this div is very low</div>

Код выше выглядит так:

enter image description here

Мне нужно, чтобы это выглядело так:

enter image description here

Кто-нибудь может помочь?

2
Isaac 25 Окт 2019 в 02:40

2 ответа

Лучший ответ

Вы можете легко сделать это, используя CSS сетку:

.container {
  display:grid;
  grid-template-columns:repeat(auto-fit,240px); /* The width */
  grid-auto-rows:250px; /* The height */
  grid-auto-flow:dense; /*This is the important property*/
  /* The margin */
  grid-gap:20px;
  padding:10px;
}
.container div {
  border-radius: 10px;
  background-color: #2E5173;
}

.big {
  grid-column:span 2; /* Take twice the width*/
  grid-row:span 2; /* Take twice the height*/
}
<div class="container">
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div class="big">&nbsp;</div>
  <div>this div is very low</div>
  <div>this div is very low</div>
</div>
3
Temani Afif 25 Окт 2019 в 00:04

CSS Grid может предоставить вам отличный контроль над вашими макетами и не очень сложен. Некоторые из ресурсов, которые я использовал в последнем, перечислены ниже:

www.w3schools.com/css/css_grid.asp
learncssgrid.com
css-tricks.com/snippets/css/complete-guide-grid

CSS Grid также хорошо работает с медиа-запросами, если вам нужно, чтобы страница была отзывчивой.

0
Lewis Lockhart 24 Окт 2019 в 23:58
58550455