显示内联块下一行未正确显示 [英] Display inline-block next row not comming properly

问题描述

。 div1  {
  display  ：  inline-block;  
  width  < span class =code-keyword>：  49％;  
  border  ：  1px纯红色;  
  height  ：  250px;  
} 
 
。 div2  {
  display  ： 内联块;  
  width  ： < span class =code-keyword> 49％;  
 
  border  ：  < span class =code-keyword> 1px solid red;  
} 
 
 
。 div3  {
  display  ：  inline-block;  
  width  ：  49％;  
  border  ：  1px solid红色;  
  vertical-align  ： 顶部;  
 
} 
 
 
。 div4  {
  display  ：  inline-block;  
  width  ：  49％;  
  border  ：  1px纯红色;  
} 

 <   div     class   =   div1 >  
 some content1 
 <   / div  >  <！ -     
    - >   <   div     class   =  div2 >  
 some content2 
 <   / div  >  <！ -     
    - >   <   div     class   =  div3 >  
 some content3 
 <   / div  >  <！ -     
  < span class =code-comment>  - >   <   div     class   =  div4  >  
 some content4 
 <   / div  >  

我尝试过：



某些内容2与某些内容之间存在差距4

为什么？空白空间创造我无法理解



一些内容1一些内容2

一些内容4



一些内容4



所以2和4之间的差距为什么这个差距无法理解

可以说出来请

解决方案

内容2和内容4之间存在差距，因为.div2没有设置高度，而且并排的div不是自动的对齐。



那里有两个选项：要么将高度放在.div2上，要么使用flexbox。在我看来，flexbox是最干净的方法。



如何在这里做：你将div1和div2包装在父div中，然后你给它class 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;  
} 

这就是你所需要的！



您可以使用flexboxs做更多事情。如果您有兴趣，请查看使用CSS灵活框 - CSS | MDN [ ^

.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>

What I have tried:

There is gap between some content 2 and some content 4
So why blank space create I am able t understand

some content1 some content 2
Some content4

Some content 4

So theere gap between 2 and 4 why this gap created not able to understand
can any tell me please

解决方案

There is a gap between content 2 and content 4 because .div2 doesn't have a height set, and divs side-by-side are not automatically aligned.

There are two options: either you put a height on .div2, or you use flexbox. In my opinion, flexbox is the cleanest way to do this.

How to do that here: you wrap div1 and div2 in a parent div, and you give it the class 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>

And in your CSS, you add this:

.row {
  display: flex;
}

That's all you need here!

You can do a lot more with flexboxes. If you're interested, take a look at Using CSS Flexible Boxes - CSS | MDN[^]

这篇关于显示内联块下一行未正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！