前端入門篇之div

因爲以前沒有作過前端的開發工做,在如今的前端開發工做中遇到許多坑,有關於javascript的,有關於css樣式的,因此想在這裏總結一下。文章的結構的可能會比較混亂,同一篇文章可能會有屢次的修改。javascript

div顯示在同一行中

div是塊級元素,默認是不會顯示在同一行的,可是能夠經過以下方式,讓div元素顯示在同一行中。css

使用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和換行)。網上有不少方式能夠消除這個留白,在這裏就不詳細表述了。html

使用flex

本人使用flex方式尚未成功,待測試成功以後再來補充...前端

reactjs行內樣式

這個很簡單,可是不少初學者會在這裏踩坑。我根據baidu搜索出來的方法在react中使用行內樣式,實際並不成功。我不清楚是什麼緣由,或許是版本不一樣???不過,我下面的內容都是親測可用的。java

  • 普通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'使用的是單引號react

div的flex樣式

相關文章
相關標籤/搜索