对齐 <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>