如何将文本左右放置在图像中的页脚中答案

【问题标题】：how to put text right and left in a footer like the one in the image如何将文本左右放置在图像中的页脚中
【发布时间】：2019-07-22 18:00:34
【问题描述】：

首先，这是我在 stackoverflow 中的第二个问题，所以不要严格:(。我正在尝试使用 html、css 和有时 bootstrap 创建模板在页脚中，我想将文本放在右侧，例如“条款和条件，隐私”，并在左侧放置社交媒体图标。

我尝试使用列，但出现问题或无法正常工作。

我的声望不是 10 级，所以我希望屏幕截图能帮助你理解...更多信息是我希望整个模板居中，所以我使用了一个带 wrap 的类。

https://i.stack.imgur.com/4fEIY.png

【问题讨论】：

在此处添加您的 HTML 和 CSS 代码
整个代码？
感谢所有帮助过我的人。现在唯一要做的就是添加 instagram、facebook 和 twitter 图标...如果我在图标查找器上找到它们，我必须编辑它们吗？

标签： html css bootstrap-4 footer

【解决方案1】：

基本上你可以使用display: flex 和justify-content: space-between 来实现这一点。

/* Important things */
footer {
  display: flex;
  justify-content: space-between;
}



/* Decorative */
a {
  text-decoration: none;
  color: #555;
}

a + a {
  margin-left: 10px;
}

footer {
  background-color: #eee;
  padding: 20px 40px;
}

<footer>
  <section>
    <a href="#">Terms and Conditions</a>
    <a href="#">Privacy</a>
  </section>
  
  <section>
    <a href="#">Follow</a>
    <a href="#">&spades;</a>
    <a href="#">&clubs;</a>
    <a href="#">&hearts;</a>
  </section>
</footer>

【讨论】：

这也有帮助..但我不希望模板在 javascipt..just html css
o.0 你在说什么，里面没有javascript，javascript: void(0)只是为了禁用链接
哦，对不起，我明白了..对不起，郝先生，我是编程新手
@ChristosDritsas 我刚刚更新了答案，这样更好吗？ :)

【解决方案2】：

在 Bootstrap 4 上，您可以使用 float-right 和 float-left 类。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/js/all.min.js"></script>

<section>
  <a href="#" class="text-dark">Terms and conditions</a>
  <a href="#" class="text-dark">Privacy</a>
  <div class="iconHere float-right">
    Follow
    <i class="fab fa-facebook-f"></i>
    <i class="fab fa-twitter"></i>
    <i class="fab fa-instagram"></i>
  </div>
</section>

您可以查看完整文档here。

【讨论】：

请更准确地回答您的问题。可能是您指出了正确的方向，但这可以被视为答案。
对不起，我的错误......我已经在我的答案中添加了一个工作代码

【解决方案3】：

您没有提供代码，但您可以这样做。

有很多方法可以做到这一点，你可以使用 flex-box，或者只使用位置，或者像我在下面所做的那样使用浮动。

.footer{
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
  min-height: 15px;
  border: thin solid #d3d3d3;
}
.block{
  display: inline-block; /* important */
}

.shift-right{
  float: right;  /* important */
}

<div class="footer">
  <div class="block ">Left Content</div>
  <div class="block shift-right"> Right Content</div>
</div>

【讨论】：

是的，我没有提供代码..因为我在 0 :( 。但是谢谢....我现在可以从一些东西开始..并添加社交媒体图标
太棒了。此方法适用于几乎所有浏览器，包括旧浏览器。您可以使用速度更快但旧浏览器不支持的 Flexbox。