在 wordpress 的左侧和右侧添加带有文本的页脚答案

【问题标题】：Adding a footer with text on left and right side in wordpress在 wordpress 的左侧和右侧添加带有文本的页脚
【发布时间】：2018-05-21 20:17:10
【问题描述】：

我已将以下代码添加到我的 wordpress 网站中的 footer.php 文件中（使用 241 主题）。隐私政策和条款和条件及其各自的链接显示在左侧，但我关于版权的文本没有显示在右侧（它没有显示在任何地方）。有谁知道我错过了什么？

<div class="MainDiv">
  <div class="MainBottom footer">
    <div class="MainFooter container">
      <div class="LeftSide ">
        <a target="_blank" href="https://www.myurl.html">Privacy Policy</a>
        <a target="_blank" href="https://www.myurl.html">Terms and Conditions</a>

        <div class="RightSide">
          Copyright © 2018 My Company. <span>All rights reserved.</span>
        </div>
        <div class="BottomFix"></div>
      </div>
    </div>

【问题讨论】：

首先，您的一些divs 没有关闭。没关系（浏览器仍然会解析它），但我认为它有助于你的困惑。从您创建的结构来看，.RightSide
似乎嵌套在 .LeftSide
下，使其成为子元素。我猜这不是你想要的？

标签： html wordpress css

【解决方案1】：

您可以将display: flex 和justify-content: space-between 用于.MainFooter 容器，并在窗口底部修复它，您可以将position: fixed 用于MainBottom（以及一些其他设置 - 见下文） .

顺便说一句：你忘了关闭.LeftSide DIV，我还在我的 sn-p 中添加了它。

.MainBottom {
  position: fixed;
  bottom: 0;
  width: 100%;
}

.MainFooter {
  display: flex;
  justify-content: space-between;
}

<div class="MainDiv">
  <div class="MainBottom footer">
    <div class="MainFooter container">
      <div class="LeftSide ">
        <a target="blank" href="https://www.myurl.html">Privacy Policy</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a target="blank" href="https://www.myurl.html">Terms and Conditions</a>
      </div>
      <div class="RightSide">Copyright © 2018 My Company. <span>All rights reserved.</span></div>
    </div>
  </div>

【讨论】：

【解决方案2】：

基本上 div 与左侧对齐。如下图所示

【讨论】：

【解决方案3】：

我不知道您为这些类编写了哪些样式，但这里是您的初始代码的略微修改版本，带有简单的 flexbox 样式修复：

.MainFooter {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

<div class="MainDiv">
  <div class="MainBottom footer">
    <div class="MainFooter container">
      <div class="LeftSide ">
        <a target="blank" href="https://www.myurl.html">Privacy Policy</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a target="blank" href="https://www.myurl.html">Terms and Conditions</a>
      </div>
      <div class="RightSide">
        Copyright © 2018 My Company. <span>All rights reserved.</span>
      </div>
    </div>
    <div class="BottomFix"></div>
  </div>
</div>

【讨论】：