使左浮動元素環繞右浮動元素

Question

我有一個無序列表，列表項在div中浮動。 在該div內部，有一個右側浮動的側邊欄。

在此圖像中，您可以看到列表項到達側邊欄后自動換行。 但是，列表項本身沒有，因此您仍會看到側邊欄后面的白色背景。

我如何才能使列表項也包含在內？

 #container { background: #f8f8f8; border: 1px solid #d1d1d1; display: block; margin-left: auto; margin-right: auto; max-width: 1200px; overflow: hidden; padding: 10px; position: relative; } #sidebar { background: none; float: right; margin: 0 10px 0; padding: 10px; width: 300px; transition: 500ms right; border: 1px solid grey; min-height: 300px; } .submissions-container ul { list-style-type: none; } .submissions-container ul li { margin: 0px 0px 10px 0px; background-color: #fff; border: 1px solid #f4f4f4; border-left-color: rgb(244, 244, 244); border-left-style: solid; border-left-width: 1px; border-left: 4px solid #e6e6e6; box-shadow: 0px 1px 2px rgba(0,0,0,0.03); border-radius: 2px; padding: 10px; } 

 <div id="container"> <div id="sidebar"> <div class="sidebar-container"> sidebar </div> </div> <div class="content"> <div class="submissions-container"> <ul> <li> test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </li> <li> test test test </li> <li> test test test </li> <li> test test test </li> <li> test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </li> <li> test test test </li> <li> test test test </li> <li> test test test </li> </ul> </div> </div> </div> 

Answer 1

添加溢出：自動； 對你的ul>李做到了

 #container { background: #f8f8f8; border: 1px solid #d1d1d1; display: block; margin-left: auto; margin-right: auto; max-width: 1200px; overflow: hidden; padding: 10px; position: relative; } #sidebar { background: none; float: right; margin: 0 10px 0; padding: 10px; width: 300px; transition: 500ms right; border: 1px solid grey; min-height: 300px; } .submissions-container ul { list-style-type: none; } .submissions-container ul li { margin: 0px 0px 10px 0px; background-color: #fff; border: 1px solid #f4f4f4; border-left-color: rgb(244, 244, 244); border-left-style: solid; border-left-width: 1px; border-left: 4px solid #e6e6e6; box-shadow: 0px 1px 2px rgba(0,0,0,0.03); border-radius: 2px; padding: 10px; overflow: auto; } 

 <div id="container"> <div id="sidebar"> <div class="sidebar-container"> sidebar </div> </div> <div class="content"> <div class="submissions-container"> <ul> <li> test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </li> <li> test test test </li> <li> test test test </li> <li> test test test </li> <li> test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </li> <li> test test test </li> <li> test test test </li> <li> test test test </li> </ul> </div> </div> </div>