html - 图像和文本在一行中对齐且响应灵敏

Question

我正在努力实现

IMG + 文本在一行中，如 example

我希望图像能够以某种方式响应...所以当我调整窗口大小时，图像保留在那里，而且带有背景的文本... 另外，我需要文本垂直对齐......有什么想法吗？

非常感谢任何帮助!谢谢

Answer 1

这可能会对您有所帮助，稍后您可以使用媒体查询进行控制，并将图像或内容放置在您想要的任何位置。

.img-text {
  width: 100%;
  display: table;
  table-layout: fixed;
}
.photo,
.content {
  display: table-cell;
  vertical-align: middle;
}
.photo {
  width: 40%;
}
.photo img {
  max-width: 100%;
  height: auto;
}
.content {
  width: 60%;
  padding: 15px;
}

<div class="img-txt">
  <div class="photo">
    <img src="http://lorempixel.com/image_output/people-q-c-640-480-6.jpg" alt="">
  </div>
  <div class="content">
    <h1>Something</h1>
    <p>Something more</p>
    <p>You should have tried yourself first, then asked with your code as example</p>
  </div>
</div>