Question

这一直困扰着我一段时间。我对CSS / HTML的定位有点生疏，我在将图像浮动到内容的左侧和右侧时遇到了很多麻烦，这可能是我的codepen更好的解释：

代码：

.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" />

添加＆＃39;对齐＆＃39;属性为img标签使其环绕文本。我想你想要一个包含在两个图像之间的文本

Answer 2

你的CSS和HTML coad上有一些错误 1. CSS类.left-content和.right-content的宽度没有;。
2.您必须保持班级static和.bracket-right的{{1}}位置。
你没有为.bracket-left设置任何CSS类。
4.设置课程content-testimonial;，float:left;和.bracket-right的{{1}}。
5.您没有使用.bracket-left关闭代码.content-testimonial。

这是你所期待的事情可能是

<p>

HTML / CSS。在更多内容的左侧和右侧浮动（？）图像/内容

2 个答案: