将图像+文本向右移动并将文本向左移动的最佳方式

Question

以下是html布局的简要信息：http://imgur.com/a/01cNZ

我在wordpress上使用页面构建器，所以我对代码不是很好

根据我的阅读，似乎最好的办法是将img作为一个单独的div和文本有一个单独的div然后做一堆定位/对齐/浮动css的东西，但我似乎无法让它工作

生成结果的最简单方法是什么，其中图像和文本都居中并且文本在图像的右侧？

Answer 1

使用flex。

＆＃13;

＆＃13;

.con{
  display:flex;
  width:100%;
  border:1px solid black;
  align-items:center;
}
.con img{
  display:block;
  width:300px;
}
.con p{
  border:1px solid red;
  flex-grow:1;
  margin:0;
  text-align:center;
}

＆＃13;

<div class="con">
  <img src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"/>
  <p>Could be a really long text here. Could be a really long text here.Could be a really long text here.Could be a really long text here.</p>
</div>

＆＃13;

＆＃13;

＆＃13;