HTML/CSS。 float (？)图像/内容在更多内容的左侧和右侧

Question

这个问题困扰了我一段时间。我对 CSS/HTML 的定位有点生疏，我在将图像 float 到内容的左侧和右侧时遇到了很多麻烦，我的 codepen 可能更好地解释了这一点:

http://codepen.io/anon/pen/ZYMyGr

代码:

.left-content {
float: left;
width: 60%
}
.right-content {
float: right;
width: 40%
}
.bracket-right {
float: right;
position: absolute;
top: 10px;
}
.bracket-left {
float: left;
position: absolute;
}

<div class="right-content">
<div class="bracket-left">
<img src="http://theconstant-gardener.com/wp-content/themes/constantgardener/assets/img/left-bracket.svg" />
</div>
<div class="content-testimonial">
  <p>Hello world, I am a testimonial hopefully wrapped in two brackets, one to the left; the other right. I enjoy being sandwiched in quite alot
</div>
<div class="bracket-right">
<img src="http://theconstant-gardener.com/wp-content/themes/constantgardener/assets/img/right-bracket.svg" />
</div>
</div>

我不知道自己做错了什么，想从中吸取教训，我试着四处搜索但找不到任何东西，我真的不知道要搜索什么^.^

非常感谢任何帮助。谢谢!

(此外，如果我做的任何事情都是不好的做法，请告诉我，我喜欢学习 :) )

Answer 1

你需要做的就是改变:

<img src="http://theconstant-gardener.com/wp-content/themes/constantgardener/assets/img/left-bracket.svg" />至 <img src="http://theconstant-gardener.com/wp-content/themes/constantgardener/assets/img/left-bracket.svg" align="left" />

和<img src="http://theconstant-gardener.com/wp-content/themes/constantgardener/assets/img/right-bracket.svg"/>至 <img src="http://theconstant-gardener.com/wp-content/themes/constantgardener/assets/img/right-bracket.svg" align="right" />

将“align”属性添加到 img 标签使其环绕文本。我猜你想要在两张图片之间包裹一段文字