前端入門篇之div

莫談國是發表於2018-02-09
原文網址 : https://flycode.co/archives/91580
前端

由於之前沒有做過前端的開發工作，在現在的前端開發工作中遇到許多坑，有關於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樣式

相關文章