在div引导程序中，将图像在段落左右对齐

Question

我正在尝试将每个图像与"wrapper2面板页脚中心块"div中的文本的左右对齐。它正确地对齐了左侧图像，但由于某种原因，右侧图像实际上在div下面。

.wrapper2 {
  max-width: 800px;
  float: none;
  margin: 0 auto;
}

<div class="wrapper2 panel-footer center-block">
  <div class="pull-left">
    <img alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" />
  </div>
  <p><small>Copyright &copy; All Rights Reserved.</small>
  </p>
  <div class="pull-right">
    <img alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" />
  </div>

有什么原因吗？

Answer 1

要在Bootstrap中将div并排对齐，可以使用列。一行中有12列，因此在下面的示例中，我使用col-xs-4类将每个元素放在一个4宽的中。

我还将img-responsive类添加到这两个图像中，以便它们在较小的设备上正确缩小。

<div class="wrapper2 panel-footer">
  <div class="col-xs-4">
    <div class="pull-left"><img class="img-responsive" alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" /></div>
  </div>
  <div class="col-xs-4">
    <p><small>Copyright &copy; All Rights Reserved.</small></p>
  </div>
  <div class="col-xs-4">
    <div class="pull-right"><img class="img-responsive" alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" /></div>
  </div>
</div>

这是一个工作小提琴链接：https://jsfiddle.net/88ebLj7e/

您可以在Bootstrap网格中找到更多信息：https://getbootstrap.com/examples/grid/

Answer 2

<p>标记在pull-left类之外。这就是为什么它看起来"在"div下面。当你使用pull-left时。所有人都应该在班里。根据您的代码，<p><small>属于wrapper2，而不是pull-left或pull-right。

如果你需要更灵活的使用方式，你可以按照James Ives的建议使用。否则，你应该把它改成这样：

在样式表中添加一行，如下所示：

<style>
.wrapper2 p{float:left; padding-left:30%;}
</style>
<div class="wrapper2 panel-footer center-block"> 
<div class="pull-left"><img alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" /></div>
        <p><small>Copyright &copy; All Rights Reserved.</small></p>
<div class="pull-right"><img alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" /></div>
</div>

所以，您现在需要的是决定padding-left的值。希望，它有帮助。