如何实现这种布局？ （左边的图像和右边的一些文字）

Question

我想要一个左边和右边有一些图像的布局。该文本应具有以下结构：

Item 0: value 0
Item 1: value 1
Item 2: value 2

但是这个文字只出现在一行中，如：

项目0：值0 第1项：价值1 第2项：价值2

你知道为什么吗？

解决问题：http://jsfiddle.net/Lwu2zxzd/

HTML：

<div class="text-center">
  <div class="d-flex flex-row justify-content-center align-items-center">
    <img src="http://via.placeholder.com/100x100"/>
    <p><strong class="text-bg-gray">Item1: </strong>value1</p>
    <p><strong class="text-bg-gray">Item2: </strong>valu2</p>
    <p><strong class="text-bg-gray">Item3: </strong>value3</p>
  </div>
</div>

Answer 1

这是因为p标签是flex容器的弹性项目，因为您使用flex-row，您将获得此输出。要解决此问题，您可以暗示添加另一个div来包装文本：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="text-center">
  <div class="d-flex flex-row justify-content-center align-items-center">
    <img src="http://via.placeholder.com/100x100" >
    <div>
      <p class="mb-0"><strong class="text-bg-gray">Item1: </strong>value1</p>
      <p class="mb-0"><strong class="text-bg-gray">Item2: </strong>value2</p>
      <p class="mb-0"><strong class="text-bg-gray">Item3: </strong>value3</p>
    </div>
  </div>
</div>