前端入门篇之div

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

div显示在同一行中

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

使用float样式

.left{
        float: left;
    }
    .right{
        float: right;
    }

    <div>
        <div class="left">child1</div>
        <div class="left">child2</div>
        <div class="right">child3</div>
        <div class="right">child4</div>
    </div>

使用inline

.inline{
      display:inline-block;
    }
    
    <div>
      <div class='inline'>inline1</div>
      <div class='inline'>inline2</div>
    </div>

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

使用flex

本人使用flex方式尚未成功，待测试成功以后再来补充...

reactjs行内样式

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

• 普通html

<div style="background-color:red;width:100%;height:400px"></div>

• reactjs

<div
        id="explore-container"
        className="container-fluid"
        style={{
          height: this.state.height,
          overflow: 'hidden',
        }}
      >
      </div>

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

div的flex样式