Question

我希望在div中水平对齐三个td。

我还想更改下面图片中div和A的{{1}}：

B左侧A和SecondOne位于其右侧非常重要。我也使用B，但它没有用。

＆＃13;

span

＆＃13;

Answer 1

将div设为display:inline:block

不要使用内联样式。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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放在左侧并删除“margin-left”为secondOne和B

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

水平对齐<div>

5 个答案: