使左浮动元素环绕右浮动元素

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>