html - 对齐图像和文本内联

Question

我想简单地将图像与一些文本放在一起，以便文本和图像彼此相邻显示。我正在使用 display:inline; 但它似乎不起作用。这是我的代码:

<div class="design-image" style="display:inline;">
      <img src="https://s29.postimg.org/taqtdfe7r/image1.png">
    </div>
    <div class="programs" style="display:inline;">
      <p>Taking the approach of truly designing programs from ground up, Northman Underwrites each individual to reflect the unique exposure of an extraordinary life. </p>
    </div>

Answer 1

或者使用 flexbox:

img {
  width: 300px;
  height: auto;
}

p {
margin:0;
}

.fb {
  display: flex;
}

.programs, .design-image {
padding: 1em;
}

<div class='fb'>
  <div class="design-image">
    <img src="https://s29.postimg.org/taqtdfe7r/image1.png">
  </div>
  <div class="programs">
    <p>Taking the approach of truly designing programs from ground up, Northman Underwrites each individual to reflect the unique exposure of an extraordinary life. </p>
  </div>
</div>