對齊 <div> 在 <td> 水平地

Question

我想在td水平對齊三個div 。

我還要在下圖中更改A和B div ：

重要的是A轉到SecondOne左側，而B位於SecondOne的右側。 我也使用了span ，但是沒有用。

jsFiddle

 <table> <tr> <td> <div style="width: 55px; background: yellow; margin-left: 50px;"> FirstOne </div> </td> <td> <div style="width: 11px; background: red; margin-left: 50px"> A </div> <div style="width: 75px; background: green; margin-left: 50px;"> SecondOne </div> <div style="width: 11px; background: red; margin-left: 50px"> B </div> </td> <td> <div style="width: 65px; background: blue; margin-left: 50px;"> ThirdOne </div> </td> </tr> </table> 

Answer 1

將div設置為display:inline:block

不要使用內聯樣式。

 .table-divs { font-size: 0; /*fix inline-block gap*/ border: 1px dashed red } .table-divs div { display: inline-block; font-size: 16px /* set font-size again */ } .table-divs td:nth-of-type(2) { padding: 0 50px } .first { width: 55px; background: yellow; } .second { width: 75px; background: green; } .third { width: 65px; background: blue; } .a, .b { width: 11px; background: red; } 

 <table class="table-divs"> <tr> <td> <div class="first"> FirstOne </div> </td> <td> <div class="a"> A </div> <div class="second"> SecondOne </div> <div class="b"> B </div> </td> <td> <div class="third"> ThirdOne </div> </td> </tr> </table> <hr /> <div class="a"> A </div> <div class="second"> SecondOne </div> <div class="b"> B </div> <div class="third"> ThirdOne </div> 

Answer 2

將此添加到中間3個div的樣式部分：

float: left;

這樣就變成了：

<table>
  <tr>
<td>
  <div style="width: 55px; background: yellow; margin-left: 50px;">
    FirstOne
  </div>
</td>

<td>
  <div style="width: 11px; background: red; margin-left: 50px; float: left;">
    A
  </div>
  <div style="width: 75px; background: green; margin-left: 50px;float: left;">
    SecondOne
  </div>
  <div style="width: 11px; background: red; margin-left: 50px;float: left;">
    B
  </div>
</td>
<td>
  <div style="width: 65px; background: blue; margin-left: 50px;">
    ThirdOne
  </div>
</td>

Answer 3

You  can use float property 

下面是工作的小提琴

https://jsfiddle.net/w5zu09ny/1/

Answer 4

用戶“ float：left”將div放在左側，並刪除secondOne和B的“ margin-left”

<table>
  <tr>
    <td>
      <div style="width: 55px; background: yellow; margin-left: 50px;">
        FirstOne
      </div>
    </td>

    <td>
      <div style="width: 11px; background: red; margin-left: 50px;float: left;">
        A
      </div>
      <div style="width: 75px; background: green; float: left;">
        SecondOne
      </div>
      <div style="width: 11px; background: red;float: left;">
        B
      </div>
    </td>
    <td>
      <div style="width: 65px; background: blue; margin-left: 50px;">
        ThirdOne
      </div>
    </td>

  </tr>
</table>

Answer 5

嘗試這個

<td>
      <div style="width: 11px;background: red;margin-left: 50px;float: left;">
        A
      </div>
      <div style="width: 75px;background: green;float: left;">
        SecondOne
      </div>
      <div style="width: 11px;background: red;float: left;">
        B
      </div>
    </td>