Member 13368994 Ответов: 1

Дисплей инлайн-блок следующей строке не правильно поплавок 

.div1{
    display: inline-block;
    width: 49%;
	border:1px solid red;
	height:250px;
}

.div2{
    display: inline-block;
    width: 49%;
	
	border:1px solid red;
}


.div3{
    display: inline-block;
    width: 49%;
	border:1px solid red;
	vertical-align:top;
	
}


.div4{
    display: inline-block;
    width: 49%;
	border:1px solid red;
}


<div class="div1">
  some content1
</div><!-- 
--><div class="div2">
  some content2
</div><!-- 
--><div class="div3">
  some content3
</div><!-- 
--><div class="div4">
  some content4
</div>


Что я уже пробовал:

Существует разрыв между некоторые 2 и часть содержимого 4
Так почему же пустое пространство создают я не в состоянии понять

некоторые content1 некоторые материалы 2
Некоторые content4

Некоторое содержание 4

Итак, разрыв между 2 и 4, почему этот разрыв создан, не в состоянии понять
может ли кто-нибудь сказать мне, пожалуйста

1 Ответов

Рейтинг:
1

Thomas Daniels

Существует разрыв между содержимым 2 и содержимым 4, потому что .div2 не имеет заданной высоты, а дивы бок о бок не выравниваются автоматически.

Есть два варианта: либо вы положили на высоте .див2, или использовании адаптируемых блоков. На мой взгляд, flexbox - это самый чистый способ сделать это.

Как это сделать здесь: вы оборачиваете div1 и div2 в родительский div и даете ему класс row:

<div class="row"><div class="div1">
  some content1
</div><div class="div2">
  some content2
 </div></div><div class="div3">
  some content3
</div><div class="div4">
  some content4
</div>

И в вашем CSS вы добавляете это:
.row {
  display: flex;
}

Это все, что вам здесь нужно!

Вы можете сделать гораздо больше с flexboxes. Если вам интересно, взгляните на Использование гибких коробок CSS-CSS | MDN[^]