由于之前没有做过前端的开发工作，在现在的前端开发工作中遇到许多坑，有关于javascript的，有关于css样式的，所以想在这里总结一下。文章的结构的可能会比较混乱，同一篇文章可能会有多次的修改。

div显示在同一行中

div是块级元素，默认是不会显示在同一行的，但是可以通过如下方式，让div元素显示在同一行中。

使用float样式

.left{        float: left;    }    .right{        float: right;    }    
    
        
     
      child1
     
        
     
      child2
     
        
     
      child3
     
        
     
      child4
     
    
    

使用inline

.inline{      display:inline-block;    }        
    
      
     
      inline1
     
      
     
      inline2
     
    
    

使用inline方式存在一个问题，在预览的时候会发现两个元素(例如上面的inline1和inline2)之间会存有留白，这个留白是由于两个<div>之间的空白字符造成的(包括空格、Tab和换行)。网上有很多方式可以消除这个留白，在这里就不详细表述了。

使用flex

本人使用flex方式还没有成功，待测试成功之后再来补充...

reactjs行内样式

这个很简单，但是很多初学者会在这里踩坑。我根据baidu搜索出来的方法在react中使用行内样式，实际并不成功。我不清楚是什么原因，或许是版本不同？？？不过，我下面的内容都是亲测可用的。

• 普通html

• reactjs

注意哦，'hidden'使用的是单引号

div的flex样式