html - 左侧内容切入右侧 float 内容

Question

在屏幕截图中，您会在左侧(未 float )看到一个元素列表，在右侧( float )看到一个显示框。如何防止左侧元素的 li 元素切入显示框。 li 内容跟随流程并在进入显示框之前换行，但 li 元素(如在容器中)不会。

左边的 Li 项:

border: 1px solid #000000;
display: block;
margin-bottom: 8px;
padding: 10px;

右侧显示框:

border: 3px double #000000;
display: inline-block;
float: right;
margin-left: 20px;
padding: 15px;
width: auto;

谢谢， 瑞安

根据罗伯特的建议:

对 TIM B 的回应

宽度在不同的页面上是动态的，在每个页面上都是动态的，但它们不会在每个页面上改变，除了超出显示框的 li 元素。就像你将图片向左浮动，文字位于图片的右侧，但是一旦图片结束，文字就会继续在图片下方一直到页面的右边缘，这就是我想要的反向.所以我希望 li 元素移动到右侧显示框的左边缘，但越过该框，我想移动到页面的边缘。文本本身符合这一点，但由于某种原因，li 元素无法识别有一个“对象”来阻止它停止并切入显示框。它无法识别它的原因是因为右侧 float 显示框，它打破了正常流程，但我认为必须有一种方法来操纵显示框使其可以被识别或操纵 li元素，以便他们能够识别显示框。

Answer 1

如果您 float 一个元素而不是其他元素，那么您将遇到这些问题。尝试 float ul 元素并赋予元素宽度。