css - 图片右侧的文字

Question

我正在尝试在图像右侧显示文本。出于某种原因，如果文本很短，它会正确显示。但是，如果我在文本中放置几个​​句子，它会显示在图像下方。

这是一个正在发生的事情的例子:https://jsfiddle.net/deadendstreet/t0rtdu7c/

这是我正在使用的 CSS。

.float-my-children > * {
float:left;
margin-right:5px;
}
.clearfix {
*zoom:1 /* for IE */
}

Answer 1

问题是您的文本在 <div> 中元素，默认为 display: block . <强> Block-level elements 默认有一个 width 的 100% ，所以尝试将自己“分开”并占据一整行。

因此，您需要做的是指定一个 width对于您的文本和图像，合并后总数 100% (补偿边距后)。在我的示例中，我使用了 calc() 补偿 margin-right .

另请注意，您可能不想提供 margin-right到文本(因为它是最后一个兄弟)，所以我只将它应用到我的示例中的图像。如果你想增加与盒子的距离，添加 padding 会更有利到盒子本身。

/* tell the container's children to float left: */

.float-my-children>* {
  float: left;
  
}

.float-my-children > img {
  margin-right: 5px;
  width: calc(10% - 5px);
}

.float-my-children > div {
  width: 90%;
}

/* this is called a clearfix. it makes sure that the container's children floats are cleared, without using extra markup */

.clearfix {
  *zoom: 1/* for IE */
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}


/* end clearfix*/


/* below is just to make things easier to see, not required */

body>div {
  border: 1px dashed red;
  margin-bottom: 10px;
}

<div class="clearfix float-my-children">
  <img src="http://www.carleybakker.com/wp-content/uploads/2017/12/tonya_testimonial.png" width=50px>
  <div>“Carley’s presentation was engaging and informative. She is a strong speaker and gave the audience valuable insights.”
    <div style="font-size: 9px">-- Board of Trade</div>
  </div>
</div>

<div class="clearfix float-my-children">
  <img src="http://www.carleybakker.com/wp-content/uploads/2017/12/tonya_testimonial.png" width=50>
  <div>Carley’s presentation was engaging and informative.</div>
</div>

希望对您有所帮助! :)