时间戳

首页 > 解决方案 > 初学者 CSS：具有相同 div 容器的 3 个页脚列上的文本对齐

css - 初学者 CSS：具有相同 div 容器的 3 个页脚列上的文本对齐

问题描述

我是网络建设的初学者，我制作了我的第一个网站。

我目前正在研究我的页脚设计，我希望有 3 列（左、中、右）。左边是我的 Whatsapp 的链接，中间是我放置徽标的地方，右边是我放置 Instagram 的地方。

从设计角度来看，左列将向左对齐；中间将居中对齐，右对齐（附图）。

我设法通过 Chrome 上的 Inspector 功能预览了我希望它们的样子，但将其翻译成 CSS 对我来说是另一个问题。左右列包含在同一个容器中。如果我使容器左对齐，它将在我的左列上工作，但会使右列出错，反之亦然。更糟糕的是，中间部分也包含在同一个容器中。

任何帮助将不胜感激。非常感谢你的帮助。请在下面找到相关截图

  1. 当前页脚 在此处输入图像描述

  2. 预期的页脚 在此处输入图像描述

  3. 共享同一个 div 容器的所有 3 列的屏幕截图

中央 在此处输入图像描述

剩下 在此处输入图像描述

正确的 在此处输入图像描述

标签： css

解决方案

<!DOCTYPE HTML>
<html>
<head>
<title>Dummy</title>
<style>
#footer {
    display: table;
    max-width: 60em;
    padding: 1.25em;
    margin: 0 auto;
    border: 1px solid black;
 }

#footer div {
    display: table-cell;
    width: 33.333%;
    padding: 1em;
    text-align: center;
}

#footer div h2 {
    text-align: center;
 }

#footer div:nth-of-type(2) {
    border-right: 1px solid black;
    border-left: 1px solid black;
 }

#footer div:nth-of-type(3) {
    text-align: left;
 }
</style>
</head>

<body> 
 <div id="footer">
  <div>
    <h2>Left</h2>
    <p>Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
  </div><div>
    <h2>Center:</h2>
    <p>Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
  </div><div>
    <h2>Right:</h2>
    <p>Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
  </div>
 </div>
</body>

</html>

推荐阅读