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

Question

我正在尝试创建一个框，其中图像在左侧，文本（标题，价格和说明）在右侧对齐。 问题是，文本始终显示在框外。 我在这里做错了什么？

 .photo { width: 100% } .menu__item { width: 100%; border: 1px solid #c4c4c4; display: block; } .menu__item__photo { width: 40%; padding-right: 16px; display: block; } .menu__item__info__photo { width: 60%; display: block; float: right; } .menu__item__info__title { float: left; width: 78%; } .menu__item__info__price { float: right; width: 21%; text-align: right; } 

 <div class="menu__item"> <div class="menu__item__photo"> <img src="http://placehold.it/350x150" class="photo"> </div> <div class="menu__item__info__photo"> <div class="menu__item__info__title">Product Title Here</div> <div class="menu__item__info__price">$9.99</div> <div class="menu__item__info__description">Description here..</div> </div> </div> 

这是一个小提琴： https : //jsfiddle.net/pxanzefe/

Answer 1

您也可以float左项目：

1. 浮动.menu__item__photo项目，并添加box-sizing以将填充包含在40%宽度内。

2. 在您的容器上使用clearfix方法。

 .photo { width: 100% } .menu__item { width: 100%; border: 1px solid #c4c4c4; display: block; } .menu__item:after { content: ""; display: table; clear: both; } .menu__item__photo { width: 40%; padding-right: 16px; display: block; float: left; box-sizing: border-box; } .menu__item__info__photo { width: 60%; display: block; float: right; } .menu__item__info__title { float: left; width: 78%; } .menu__item__info__price { float: right; width: 21%; text-align: right; } 

 <div class="menu__item"> <div class="menu__item__photo"> <img src="http://placehold.it/350x150" class="photo"> </div> <div class="menu__item__info__photo"> <div class="menu__item__info__title">Product Title Here</div> <div class="menu__item__info__price">$9.99</div> <div class="menu__item__info__description">Description here..</div> </div> </div> 

Answer 2

如果只希望框内包含文本，请添加overflow: auto; 到包含的div：

 .photo { width: 100% } .menu__item { width: 100%; border: 1px solid #c4c4c4; display: block; overflow:auto; } .menu__item__photo { width: 40%; padding-right: 16px; display: block; } .menu__item__info__photo { width: 60%; display: block; float: right; } .menu__item__info__title { float: left; width: 78%; } .menu__item__info__price { float: right; width: 21%; text-align: right; } 

 <div class="menu__item"> <div class="menu__item__photo"> <img src="http://placehold.it/350x150" class="photo"> </div> <div class="menu__item__info__photo"> <div class="menu__item__info__title">Product Title Here</div> <div class="menu__item__info__price">$9.99</div> <div class="menu__item__info__description">Description here..</div> </div> </div> 

当您浮动元素时，它们将从文档流中删除，添加溢出规则将恢复您想要的行为。