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

我正在尝试在左侧创建一个包含图像的框，并在右侧对齐文本（标题，价格&说明）。问题是，文本总是显示在框外。我在这里做错了什么？如何获取浮动左侧图像并将浮动右侧文本对齐框内？

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

来源

2016-09-23 user1996496

文字很好..但我想在图像右侧的框内的整个文本:) – user1996496

您可以float你左边的项目过于：

浮法.menu__item__photo项目，并添加box-sizing包括里面的填充宽度为40%。
在容器上使用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>

来源

2016-09-23 19:55:01 DaniP

这工作完美。谢谢：）） – user1996496

如果你只是想包含在框中的文本，添加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>

当你FL燕麦元素他们从文档流中删除，并添加溢出规则恢复你以后的行为。

来源

2016-09-23 19:56:07 j08691

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

回答

相关问题