如何剪辑浮动内容

Question

The following code snippet displays some headlines, with some icons floated on the left. The parent div has a defined height, with scroll:auto set.

Currently, scrolling to the bottom looks like this:

However, I'd like to clip off the icons when the text entries end, so when scrolling to the bottom, it looks like this:

The reason for the use of float is so that when there are not many icons, the text flows like this:

 .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

Just smack a overflow: clip on your .content along with the sexy overflow-clip-margin: content-box .

Note on overflow-clip-margin : Safari doesn't support it (yet). Quick edit: Firefox has some issues with overflow-clip-margin 's visual-box property too. My bad!

Without it, the images are still clipped but without caring about your .content padding . Shouldn't be an issue if your text isn't actually behind a cyan background-color ; it's hard to tell on a white background.

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