如何在css的同一行中对齐图像和段落？

Question

我有一个设计，其中段落和图像在同一行中对齐，如下所示：

此时此刻，我可以将此信息发送到fiddle。我正在使用Bootstrap 3.我尝试使用display: inline-block, display: block and display: inline但遗憾的是我仍然无法将段落和图像放在设计中如上所示的同一行中。

段落部分的HTML代码是：

<div id="line2" class="col-lg-12">
  <div class="cofounder-ceo-image">
    <img src="assets/img/Uploads/jack.jpg"> </div>
     <p>Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say </p>
</div>

Answer 1

您已使用网格，因此请将图像放入列中。这意味着网格系统将为您管理所有内容，而不是尝试使用浮动并自行管理它。

漂浮在这种情况下并不理想 ，因为它们会从流中取出元素，这可能会引入其他问题，例如扩展出容器，弄乱了布局等。

将图片和文字添加到包含2列的新行中的示例：

  <div id="line2" class="col-lg-12">
    <div class="row">
      <div class="col-sm-4">
        <div class="cofounder-ceo-image">
          <img src="https://s26.postimg.org/6lwl4wpxl/jack.jpg">
        </div>
      </div>
      <div class="col-sm-8">
        <p>Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever
          you say Whatever you say </p>
        <p class="ceo">ABC DEF - Co-founder and CEO</p>
      </div>
    </div>
  </div>

需要额外的CSS（使图像响应）：

.row img {
  width: auto;
  max-width:100%;
  height: auto;
}

这将使容器的宽度达到其尺寸的100％。即它不会伸展到超过其实际宽度。
这是您对CSS所需的唯一更改 - 您当然不需要开始添加跨度等。

小提琴：https://jsfiddle.net/cvaxvzbf/

备注：

1. 图像位于4/12列（即行的三分之一），文本位于8/12 - 您可以将其更改为适合。
2. 在小型显示器（＆lt; 768px）上，图像和文本将显示在单独的行上 - 否则图像可能太小。如果您想更改此设置，可以使用col-xs-?，例如两列上的col-xs-6使每个列宽度为1/2
3. 如果列小于图像，则上面的CSS将使图像适合列宽。如果图像更宽（即它永远不会显示大于其实际尺寸的图像），它不会使图像拉伸以适合列 - 如果您想这样做，请将宽度更改为100％。

Answer 2

你必须使用浮动和方向：rtl;

#line2 .cofounder-ceo-image{float: left;}
#line3{direction: rtl;}/*this is for right align like arabic*/
#line3 .cofounder-ceo-image{float: right;}

Answer 3

您可以使用float: left使图像在段落附近“浮动”。

像这样的东西

img {
  border-radius: 100%;
  width: 100px;
  height: 100px;
  object-fit: cover;
  float: left;
  margin-right: 20px;
}

<div id="line2" class="col-lg-12">
  <div class="cofounder-ceo-image">
    <img src="https://i.pinimg.com/736x/ee/bd/cc/eebdcc1600cae9e1d7ac3ef5e33b8778--series-on-netflix-drama-series.jpg"> </div>
  <p>Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you
    say Whatever you say </p>
</div>

Answer 4

只需浮动图像，例如：

    <img style="float:left;" src="assets/img/Uploads/jack.jpg">