将页面拆分为 3 列，内容位于更宽的中心列？答案

【问题标题】：Split page into 3 columns with content in wider center column?将页面拆分为 3 列，内容位于更宽的中心列？
【发布时间】：2021-04-21 09:14:01
【问题描述】：

我需要创建一个 3 列布局，其中中心列是侧列宽度的两倍，没有使用引导程序，因为bootstrap doesn't work in emails。

在引导程序中，它将是：

<div class="container">
  <div class="col-3">
  </div>

  <div class="col-6">
    <!-- All page content goes here -->
  </div>

  <div class="col-3">
  </div>
</div>

如何在不使用引导程序的情况下实现这一目标？

注意

我找到了this code：

<div class="row">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

但这似乎不起作用。

【问题讨论】：

向下滚动到“在本例中，我们将创建三个不相等的列：”部分，然后单击“自己尝试”按钮。这应该正是您想要的？
呃，到目前为止你尝试了什么？ CSS-Grid 的简单操作。也可以使用flexbox 和教程链接中显示的float-technique 来完成。
您想为您的电子邮件创建布局吗？如果用于电子写作，则 flex 和 grid 将不起作用。您需要使用table。
@s.kuznetsov 是的，它用于电子邮件。大约一个小时前我才知道引导程序不起作用，所以我不能使用它，也不能使用任何其他在电子邮件中不起作用的东西。
@stevec，使用 table - 这对电子邮件非常有用。

标签： html css

【解决方案1】：

对于电子邮件，您需要表格：

table {
  width:100%;
  table-layout:fixed;
  border-spacing:0;
}

td {
  width:25%;
}
td:nth-child(2) {
  width:50%;
}

.column {
  padding:15px;
  border:1px solid;
}

<table class="row">
  <tr>
    <td class="column"></td>
    <td class="column"></td>
    <td class="column"></td>
  </tr>
</table>

【讨论】：

为什么是表格而不是网格系统？ @Temani Afif
@SidouMahmoud 唯一一个足够老的系统并且得到所有电子邮件客户端的支持（就像 OP 想要的那样）
啊，我没有阅读上面帖子中的cmets。谢谢

【解决方案2】：

特别是对于电子邮件，最简单的解决方案是最好的，所以我建议使用带有内联样式的表格，如下所示：

table {
  width: 600px;
}

td {
  border: 1px solid #000;
}

<table cellspacing="0" cellpadding="0" border="0">
  <tbody>
    <tr>
      <td style="width: 25%; height: 20px;"></td>
      <td style="width: 50%; height: 20px;"></td>
      <td style="width: 25%; height: 20px;"></td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案3】：

我不确定给定示例在什么意义上不起作用，因为这个 sn-p 根据问题的要求提供宽度为 25%、50%、25% 的列。

但是，请注意，某些电子邮件系统可能不支持内联样式以外的 CSS，因此在 sn-p 中，样式已被内联并删除了填充等，因为您必须决定如何处理并在宽度定义。即使仅使用内联 CSS，电子邮件系统仍然可能不接受 HTML，但这取决于您的确切用例，这是否重要，以及如果信息被忽略，您将如何确保向用户呈现正确的信息。

<div>
  <div style=" background-color:#aaa; width: 25%; float: left;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div style=" background-color:#bbb; width: 50%; float: left;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div style=" background-color:#ccc; width: 25%; float: left;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
</div>

【讨论】：

【解决方案4】：

正如我在上面的评论中所写，今天，您只能使用 table 显示电子邮件。 Flex 和 Grid 不起作用！

还有一点非常重要。电子邮件模板无法访问 CSS，因此必须在标签内指定所有样式。

我为您制作了一个简单的带有内容的电子邮件模板。就用它吧。如果您需要修复或修改某些内容，请告诉我。

<table style="width: 100%; border: 1px solid black">
  <tr>
    <th style="width: 25%; border:1px solid black">title 1</th>
    <th style="width: 50%; border:1px solid black">title 2</th>
    <th style="width: 25%; border:1px solid black">title 3</th>
  </tr>
  <tr>
    <td style="border:1px solid black">content 1</td>
    <td style="border:1px solid black">content 2</td>
    <td style="border:1px solid black">content 3</td>
  </tr>
</table>

【讨论】：

【解决方案5】：

使用内联样式：

<div style="display: flex;">
  <div style="flex: 25%; max-width: 25%">
    column 1
  </div>
  <div style="flex: 50%; max-width: 50%">
    column 2
  </div>
  <div style="flex: 25%; max-width: 25%">
    column 3
  </div>
</div>

【讨论】：

【解决方案6】：

.row{
  display:flex;
  height:150px;
  border:2px solid red;
}
.column{
  border:1px solid green;
  margin:2px;
  width:30%;
}
.column1, .column3{
  flex-grow:1;
}
.column2{
  flex-grow:2;
}

<div class="row">
  <div class="column"></div>
  <div class="column2 column"></div>
  <div class="column"></div>
</div>

flex grow 对您来说应该是一个非常快速的解决方案。运行代码，看看它是如何工作的。

【讨论】：

我认为这不适用于电子邮件。

【解决方案7】：

您发布的第二段代码不起作用，因为您尚未定义 row 或 column CSS 类。

您有两个主要选择：

通过将引导类的代码复制到电子邮件正文中的style 标记中来使用引导类。
编写您自己的类来实现这种布局。这是一个使用 display: flex 的示例。

.row {
  height: 100vh;
  width: 100vw;
  display: flex;
}

#col1 {
  height: 100vh;
  flex-basis: 20%;
  background-color: red;
}

#col2 {
  height: 100vh;
  flex-basis: 60%;
  background-color: green;
}

#col3 {
  height: 100vh;
  flex-basis: 20%;
  background-color: blue;
}

<div class="row">
  <div id="col1"></div>
  <div id="col2"></div>
  <div id="col3"></div>
</div>

【讨论】：

【解决方案8】：

更新：

对于电子邮件，表格肯定会工作 :) 是的，您只需要使用表格即可。因为某些电子邮件系统不支持外部 CSS。

litmus.com

.table{
  width:100%;
 }
 
 tr td{
   width:25%;
   height:50px;
 }
 
 tr .second{
   width:50%;
 }

    <table class="table" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td></td>
        <td class="second"></td>
        <td></td>
      </tr>
    </table>

【讨论】：