Question

我需要HTML / CSS中的3列布局，但与我在此处找到的任何内容都不同。

我真正努力实现的目标：

3 Col table，固定宽度为740px：

流体左列（这应该随着剩下的空间扩展/收缩）
固定宽度的中间列（130px）
自动宽度右列（仅与内容一样宽，不得换行文字）

这甚至可以吗？我已经看到了左边有流体的例子，右边固定但我不知道如何添加第3个自动宽度列

让我疯了好几年！

添加了复杂功能：任何CSS样式都需要内联，这适用于HTML电子邮件！

谢谢大家。

Answer 1

首先，请参阅创建最小，完整且可验证示例的Help Center article。在发布此处寻求帮助之前，您应该尝试自己的解决方案。

为了帮助您入门，我快速创建了codepen example您正在寻找的内容。左侧部分将使用任何可用空间。中间部分将始终为130px，右侧部分将适合您拥有的任何内容的宽度。如果您有任何问题，请告诉我。

HTML

<table border="1" width="740px">
  <tr>
    <td>
      left
    </td>
    <td class="middle">
      middle
    </td>
    <td class="right">
      right - this will fit to your content
    </td>
  </tr>
</table>

CSS

.middle {
  width: 130px;
}

.right {
  width: 1%;
}

编辑：我刚看到你关于制作CSS内联的说明。您只需将相关的CSS添加到HTML中的样式标记，而不是使用外部样式表。

新HTML

<table border="1" width="740px">
  <tr>
    <td>
      left
    </td>
    <td style="width: 130px;">
      middle
    </td>
    <td style="width: 1%;">
      right - this will fit to your content
    </td>
  </tr>
</table>

Answer 2

好吧，我无法相信我浪费了几个小时试图完成这项工作，但我随机尝试了这个并且DID工作了！

<table style="width:100%; max-width:740px;" height="65px" cellspacing=0 cellpadding=0>
<tr>
<td height="65px" style="background-color: cyan;">Left</td>
<td height="65px" width="130px" style="min-width:130px; max-width:130px; background-color: yellow;">Middle 130px</td>
<td width="1px" height="65px" style="background-color:green;">dynamic</td>
</tr>
</table>

https://jsfiddle.net/Murdo/5fn1z3g5/

不确定将宽度设置为100％然后将其限制为最大值为740是最佳方式...

或者我可以放一个宽度为740的DIV，然后将表格设置为div内的100％宽度......

<div style="width:740">
<table style="width:100%" height="65px" cellspacing=0 cellpadding=0>
<tr>
<td height="65px" style="background-color: cyan;">Left</td>
<td height="65px" width="130px" style="min-width:130px; max-width:130px; background-color: yellow;">Middle 130px</td>
<td width="1px" height="65px" style="background-color:green;">dynamic</td>
</tr>
</table>
</div>

更新：这在浏览器中运行良好..遗憾的是，outlook不喜欢DIV宽度，任何最大宽度或最小宽度。回到绘图板！

Answer 3

你可以使用CSS flex模型轻松完成。

<强> HTML

<div class="Container">
  <div>COL 1
  Im taking all the rest
  </div>
  <div>COL 2</div>
  <div>
  COL 3
  I'm taking excatly what i need
  </div>
</div>

<强> CSS

.Container
{
  width: 740px;
  height: 300px;
  display: flex;
  background-color: green;
}

.Container div:first-child
{
  background-color: red;
  flex: 1 0 auto;
}

.Container div:nth-child(2)
{
  background-color: yellow;
  flex: 0 0 130px;
}
.Container div:nth-child(3)
{
  background-color: blue;
  flex: 0 0 auto;
}

带有内联样式的

和here（适用于您的邮件）

HTML CSS三列布局，扭曲

3 个答案: