Question

例如，我想设置红色：绿色：蓝色相对于父母的宽度比例为1：2：1，我尝试使用em，这似乎得到了我想要的结果：

<table style="width:100%;height:50px;">
  <tr>
    <td style="height:100%;background-color:red;width:1em;">
    </td>
    <td style="height:100%;background-color:green;width:2em;">
    </td>
    <td style="height:100%;background-color:blue;width:1em;">
    </td>
  </tr>
</table>

但是当元素为0时，元素不会消失：

<table style="width:100%;height:50px;">
  <tr>
    <td style="height:100%;background-color:red;width:1em;">
    </td>
    <td style="height:100%;background-color:green;width:0em;">
    </td>
    <td style="height:100%;background-color:blue;width:1em;">
    </td>
  </tr>
</table>

根据em的描述，似乎不太可能用于定义元素的相对宽度/高度。

以正确的方式使用em吗？如果没有，实现这个目的的正确方法是什么？

Answer 1

这称为“单元格填充”，只需将表格单元格td设为padding: 0;

<table style="width:100%;height:50px;">
  <tr>
    <td style="height:100%;background-color:red;width:1em;">
    </td>
    <td style="height:100%;background-color:green;width:0em;padding: 0;">
    </td>
    <td style="height:100%;background-color:blue;width:1em;">
    </td>
  </tr>
</table>

编辑：再次阅读您的帖子后，您要搜索的是百分比。这将允许您使用父节点宽度的百分比。

1：2：1的比例为25％：50％：25％

<table style="width:100%;height:50px;">
  <tr>
    <td style="height:100%;background-color:red;width:25%;">
    </td>
    <td style="height:100%;background-color:green;width:50%;">
    </td>
    <td style="height:100%;background-color:blue;width:25%;">
    </td>
  </tr>
</table>

Answer 2

您可以使用em代替%。检查下面的代码段。同时添加cellpadding="0"

＆＃13;

<table style="width:100%;height:50px;" cellpadding="0">
  <tr>
    <td style="height:100%;background-color:red;width:25%;">
    </td>
    <td style="height:100%;background-color:green;width:50%;">
    </td>
    <td style="height:100%;background-color:blue;width:25%;">
    </td>
  </tr>
</table>

＆＃13;

或者您可以使用flexbox

＆＃13;

ul {
  list-style: none;
  display: flex;
  padding: 0px;
}
li {
  flex-grow:1;
}
li.double {
  flex-grow: 2;
}

＆＃13;

<ul>
<li style="background-color:red;">1</li>
<li class="double" style="background-color:green;">2</li>
<li style="background-color:blue;">3</li>
</ul>

＆＃13;

Answer 3

表元素具有cellspacing和cellpadding。设置cellpadding =＆＃34; 0＆＃34;喜欢以下它将解决您的问题。

＆＃13;

<table style="width:100%;height:50px;" cellpadding="0">
  <tr>
    <td style="height:100%;background-color:red;width:1em;">
    </td>
    <td style="height:100%;background-color:green;width:0em;">
    </td>
    <td style="height:100%;background-color:blue;width:1em;">
    </td>
  </tr>
</table>

＆＃13;

Answer 4

<table style="width:100%;height:50px;border-collapse: collapse;">
  <tr>
    <td style="height:100%;background-color:red;width:50%;">
    </td>
    <td style="height:100%;background-color:green;width:0;">
    </td>
    <td style="height:100%;background-color:blue;width:50%;">
    </td>
  </tr>
</table>

Answer 5

我会坚持不使用表格进行布局，而是使用div而不是你的答案

＆＃13;

<table style="width:100%;height:50px;">
  <tr>
    <td style="height:100%;background-color:red;width:50%;">
    </td>
    <td style="height:100%;background-color:green;width:0;">
    </td>
    <td style="height:100%;background-color:blue;width:50%;">
    </td>
  </tr>
</table>

＆＃13;

如何按相对比例设置元素的宽度？

5 个答案: