水平对齐<div>

时间:2016-04-20 10:46:49

标签: html css html-table

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

我还想更改下面图片中divA的{​​{1}}:

enter image description here

B左侧ASecondOne位于其右侧非常重要。我也使用B,但它没有用。

jsFiddle

&#13;
&#13;
span
&#13;
&#13;
&#13;

5 个答案:

答案 0 :(得分:2)

div设为display:inline:block

不要使用内联样式。

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:1)

将其添加到中间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>

答案 2 :(得分:1)

You  can use float property 

下面是工作小提琴

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

答案 3 :(得分:1)

用户“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>

答案 4 :(得分:0)

试试这个

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