css 两个div同一行显示不出来

CSS是网页设计中常用的一项技术，其中布局是很重要的一部分。但是，有时候会遇到两个div想要在同一行显示，却总是显示不出来的问题。

div class="box">
      p>
    我是第一个div/p>
    /div>
    div class="box">
      p>
    我是第二个div/p>
    /div>
    style>
  .box{
        width: 50%;
        display: inline-block;
  }
    /style>
    

以上代码中，我们给两个div添加了相同的类名，然后使用CSS的display属性将它们都设置为inline-block，实现同一行显示。

但是，实际运行却发现第二个div总是在下一行显示。这是因为，在HTML文件中div之间的空格、换行等会被浏览器解析为一个空格，而inline-block元素之间的空格会导致它们之间产生间距。

解决这个问题的方法有很多，比如可以在HTML文件中将两个div写在同一行，或者给父元素添加font-size:0等属性，都可以达到同样的效果。

div class="wrapper">
      div class="box">
        p>
    我是第一个div/p>
      /div>
    div class="box">
        p>
    我是第二个div/p>
      /div>
    /div>
    style>
  .wrapper{
        font-size: 0;
  }
  .box{
        width: 50%;
        display: inline-block;
        font-size: 16px;
  }
    /style>
    

以上代码中，我们给父元素wrapper添加了font-size:0的属性，将元素间的空格消除。同时，为了保证子元素内容正常显示，给子元素.box添加了font-size:16px的属性。

使用以上方法，就可以实现两个div同一行显示的效果啦！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！