如何剪辑浮动内容

Question

下面的代码片段显示了一些标题，一些图标漂浮在左边。 父 div 具有定义的高度，并设置了scroll:auto 。

目前，滚动到底部看起来像这样：

但是，我想在文本条目结束时剪掉图标，所以当滚动到底部时，它看起来像这样：

之所以使用float ，是为了在图标不多的时候，文字是这样流动的：

 .parent { position: absolute; height: 100px; width: 400px; overflow: scroll; }.content { background-color: cyan; padding: 6px; }.icon { float: left; clear: both; background-color: lightpink; width: 38px; height: 38px; margin-right: 8px; margin-bottom: 6px; }.entry { font-size: 18px; }

 <div class="parent"> <div class="content"> <img class="icon"> <img class="icon"> <img class="icon"> <img class="icon"> <div class="entry">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> <div class="entry">Quisque eleifend viverra risus, nec maximus nisi vestibulum eu</div> <div class="entry">Mauris in libero lacus</div> </div> </div>

Answer 1

只需在您的.content上添加一个overflow: clip以及性感的overflow-clip-margin: content-box 。

关于overflow-clip-margin注意事项： Safari 不支持它（目前）。 快速编辑： Firefox 在overflow-clip-margin的visual-box属性方面也存在一些问题。 我的错！

没有它，图像仍然被裁剪但不关心你的.content padding 。 如果您的文本实际上不在cyan background-color后面，那应该不是问题； 在白色背景上很难分辨。

 .parent { position: absolute; height: 100px; width: 400px; overflow: scroll; }.content { background-color: cyan; padding: 6px; overflow: clip; overflow-clip-margin: content-box; }.icon { float: left; clear: both; background-color: lightpink; width: 38px; height: 38px; margin-right: 8px; margin-bottom: 6px; }.entry { font-size: 18px; }

 <div class="parent"> <div class="content"> <img class="icon"> <img class="icon"> <img class="icon"> <img class="icon"> <div class="entry">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> <div class="entry">Quisque eleifend viverra risus, nec maximus nisi vestibulum eu</div> <div class="entry">Mauris in libero lacus</div> </div> </div>

Answer 2

 .parent { position: absolute; height: 100px; width: 400px; overflow: scroll; }.content { background-color: cyan; padding: 6px 6px 0 6px; overflow: hidden; position: relative; border-bottom: 8px solid cyan; /* same color */ }.icons, .entries { display: flex; flex-direction: column; }.icons { position: absolute; top: 8px; left: 8px; }.entries { margin-left: 56px; /* icon width '38' + icon left '8' and right '8' distance */ }.icon { background-color: lightpink; width: 38px; height: 38px; margin-bottom: 6px; }.entry { font-size: 18px; }

 <div class="parent"> <div class="content"> <div class="icons"> <img class="icon"> <img class="icon"> <img class="icon"> <img class="icon"> </div> <div class="entries"> <div class="entry">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> <div class="entry">Quisque eleifend viverra risus, nec maximus nisi vestibulum eu</div> <div class="entry">Mauris in libero lacus</div> </div> </div> </div>