使用HTML和CSS对齐图像周围的文本

我有以下问题，涉及使用CSS和HTML在图像周围放置文本。我写的方式只要文本不通过图像就行。问题是，一旦它“溢出”到图像底部之外，它就可以一直向左走，看起来非常邋遢

如何使图像底部下方的文本与上一个文本对齐

注意：我不得不删除我的原始照片以防止共享个人信息，而替换的照片最终有点高，因此我不得不复制并粘贴几次文本，使其足够长以显示我正在谈论的内容

下面是JSFIDLE示例，包括我的所有代码：

.photo{
浮动：左；
高度：200px；
宽度：200px；
右边距：20px；
溢出：隐藏；
}
.照片img{
-webkit边界半径：4px；
-moz边界半径：4px；
边界半径：4px；
宽度：100%；
}
.info{}
.info h2，
#收割台h2{
文本转换：大写；
字母间距：2px；
边缘底部：.3em；
}
.info h4，
#收割台h4{
颜色：#999；
}

宙斯
助理财务顾问
为个人和家庭提供投资和退休规划方面的专家咨询和指导，并提供高水平的服务，使他们能够安心从事一生中的其他重要工作。提供
在投资和退休计划方面提供专家咨询和指导，同时为个人和家庭提供高水平服务，使他们在一生中安心从事其他重要工作。提供
在投资和退休计划方面提供专家咨询和指导，同时为个人和家庭提供高水平服务，使他们在一生中安心从事其他重要工作


我是注册财务规划师（CFP®）。

给你

---

您只需添加以下内容：

.g2 {
   display: flex;
}
.photo {
  min-width: 25%;
}

.photo{
浮动：左；
高度：200px；
宽度：200px；
右边距：20px；
溢出：隐藏；
}
.照片img{
-webkit边界半径：4px；
-moz边界半径：4px；
边界半径：4px；
宽度：100%；
}
.info{
}
.info h2，#标题h2{
文本转换：大写；
字母间距：2px；
边缘底部：.3em；
}
.info h4，#标题h4{
颜色：#999；
}
.g2{display:flex；}
.照片{
最小宽度：25%；
}

宙斯
助理财务顾问
为个人和家庭提供投资和退休规划方面的专家咨询和指导，并提供高水平的服务，使他们能够安心从事一生中的其他重要工作。为个人和家庭提供投资和退休规划方面的专家咨询和指导，并提供高水平的服务，使他们能够安心从事一生中的其他重要工作。为个人和家庭提供投资和退休规划方面的专家咨询和指导，并提供高水平的服务，使他们能够安心从事一生中的其他重要工作


我是注册财务规划师（CFP®）。

您介意解释一下这会产生什么影响吗？我对使用HTML和CSS还是有点陌生。这看起来不错！其影响在于，它将

g2

划分为与其子代一样多的垂直部分，并尝试将它们放入可用空间。通过在图像上指定

min width

，它不允许第二个子对象挤压超过该宽度。另一种选择是在另一个子项上设置

最大宽度：75%

。就这样。如果您想与古代浏览器兼容，请使用“过滤器”中的

>0%

来运行它。有关更多信息，请阅读flexbox上的文档。你可以将它用于你所能想到的大多数布局技巧。@Pato，如果你希望其他用户的行为举止像你遇到的老师一样，那么它可以也应该被用作学习工具。您应该在询问之前询问，并且只在文档表明您编写的代码应该做您希望它做的事情而不是它做的事情时询问。你找不到说明你写的东西应该像你期望的那样表现的文档。简言之，当你选择询问StackOverflow时，你选择被当作程序员对待。程序员应该在询问之前进行研究。

.g2 {
   display: flex;
}
.photo {
  min-width: 25%;
}