Question

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

Answer 1

你也可以float左边的项目：

浮动.menu__item__photo项并添加box-sizing以在40%宽度内包含填充。
在容器上使用clearfix方法。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

如果您只想要包含在框中的文字，请将overflow: auto;添加到包含的div：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

当您浮动元素时，它们会从文档流中删除，并添加溢出规则可以恢复您之后的行为。

如何获得浮动左图像并将右侧文本对齐在框内？

2 个答案: