显示内联块下一行未正确显示

本文介绍了显示内联块下一行未正确显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 。 div1 { display ： inline-block; width ： 49％; border ： 1px纯红色; height ： 250px; } 。 div2 { display ： 内联块; width ： 49％; border ： 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 > <！ - - > < 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 4So why blank space create I am able t understandsome content1 some content 2Some content4 Some content 4So theere gap between 2 and 4 why this gap created not able to understandcan 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[^] 这篇关于显示内联块下一行未正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！