如何剪輯浮動內容

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>