Html 如何在框内对齐左浮动图像和右浮动文本？

我试图创建一个框，左边是图像，右边是文本（标题、价格和说明）。问题是，文本总是显示在框外。我做错了什么

.photo{
宽度：100%
}
.菜单项{
宽度：100%；
边框：1px实心#C4C4；
显示：块；
}
.菜单项目图片{
宽度：40%；
右边填充：16px；
显示：块；
}
.菜单\项目\信息\照片{
宽度：60%；
显示：块；
浮动：对；
}
.菜单\项目\信息\标题{
浮动：左；
宽度：78%；
}
.菜单项目信息价格{
浮动：对；
宽度：21%；
文本对齐：右对齐；
}

产品名称在这里
$9.99
描述在这里。。

您也可以

浮动

左侧项目：

浮动

.menu\uuuu item\uuu photo

项，并添加

框大小调整

，以在

40%

宽度内添加填充

在容器上使用clearfix方法

.photo{
宽度：100%
}
.菜单项{
宽度：100%；
边框：1px实心#C4C4；
显示：块；
}
.菜单项：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.菜单项目图片{
宽度：40%；
右边填充：16px；
显示：块；
浮动：左；
框大小：边框框；
}
.菜单\项目\信息\照片{
宽度：60%；
显示：块；
浮动：对；
}
.菜单\项目\信息\标题{
浮动：左；
宽度：78%；
}
.菜单项目信息价格{
浮动：对；
宽度：21%；
文本对齐：右对齐；
}

产品名称在这里
$9.99
描述在这里。。

您也可以

浮动

左侧项目：

浮动

.menu\uuuu item\uuu photo

项，并添加

框大小调整

，以在

40%

宽度内添加填充

在容器上使用clearfix方法

.photo{
宽度：100%
}
.菜单项{
宽度：100%；
边框：1px实心#C4C4；
显示：块；
}
.菜单项：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.菜单项目图片{
宽度：40%；
右边填充：16px；
显示：块；
浮动：左；
框大小：边框框；
}
.菜单\项目\信息\照片{
宽度：60%；
显示：块；
浮动：对；
}
.菜单\项目\信息\标题{
浮动：左；
宽度：78%；
}
.菜单项目信息价格{
浮动：对；
宽度：21%；
文本对齐：右对齐；
}

产品名称在这里
$9.99
描述在这里。。

如果您只希望文本包含在框中，请添加

溢出：自动到包含的div：


.photo{
宽度：100%
}
.菜单项{
宽度：100%；
边框：1px实心#C4C4；
显示：块；
溢出：自动；
}
.菜单项目图片{
宽度：40%；
右边填充：16px；
显示：块；
}
.菜单\项目\信息\照片{
宽度：60%；
显示：块；
浮动：对；
}
.菜单\项目\信息\标题{
浮动：左；
宽度：78%；
}
.菜单项目信息价格{
浮动：对；
宽度：21%；
文本对齐：右对齐；
}

产品名称在这里
$9.99
描述在这里。。
如果您只希望文本包含在框中，请添加
溢出：自动到包含的div：


.photo{
宽度：100%
}
.菜单项{
宽度：100%；
边框：1px实心#C4C4；
显示：块；
溢出：自动；
}
.菜单项目图片{
宽度：40%；
右边填充：16px；
显示：块；
}
.菜单\项目\信息\照片{
宽度：60%；
显示：块；
浮动：对；
}
.菜单\项目\信息\标题{
浮动：左；
宽度：78%；
}
.菜单项目信息价格{
浮动：对；
宽度：21%；
文本对齐：右对齐；
}

产品名称在这里
$9.99
描述在这里。。
文本很好..但我希望整个文本都在框内，在图像的右侧：）文本很好..但我希望整个文本都在框内，在图像的右侧：）