html - 如何根据图像 css 对齐文本

Question

我想根据图像对齐文本，文本被打断，其余文本位于图像下方。

这是我尝试过的:

Demo

HTML:

<section>
<div class="left"><img src="https://s-media-cache-ak0.pinimg.com/236x/44/9f/02/449f02a1a0328ed5f311112b83407fdf.jpg" alt="" ></div>
<div class="right"><span>Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo </span></div>
</section>

CSS:

div.left{
  vertical-align: middle;
   display: inline-block;
}
div.right{
  vertical-align: middle;
  display: inline;
}

Answer 1

请尝试此代码

div.left{
  vertical-align: middle;
   display: inline-block;
   float:left;
}
div.right{
  vertical-align: middle;
  display: inline;
}

<section>
    <div class="left"><img src="https://s-media-cache-ak0.pinimg.com/236x/44/9f/02/449f02a1a0328ed5f311112b83407fdf.jpg" alt="" ></div>
    <div class="right"><span>Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo </span></div>
</section>