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

Question

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

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以对display: flex容器使用justify-content: space-between和.MainFooter，要在窗口底部修复此问题，您可以position: fixed使用MainBottom .LeftSide }（加上一些其他设置 - 见下文）。

顺便说一句：你忘了关闭.MainBottom { position: fixed; bottom: 0; width: 100%; } .MainFooter { display: flex; justify-content: space-between; } DIV，我还在我的片段中添加了。

<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>

<string>

Answer 2

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

Answer 3

我不知道您为这些课程编写了哪些样式，但这是一个稍微修改过的初始代码版本，其中包含一个简单的Flexbox样式修复：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;