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

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>

这是一个 fiddle :https://jsfiddle.net/pxanzefe/

Answer 1

您也可以 float 您的左侧元素:

1. float .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>