左侧内容切入右侧浮动内容

在屏幕截图中，您会看到左侧（未浮动）和右侧显示框（浮动）的项目列表。如何防止左侧物品的li元素切入显示框。 li内容遵循流程并在运行到显示框之前切换到新行，但li元素（如容器中）不会。左侧内容切入右侧浮动内容

Left div cuts into right div

左侧

李项：

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;

感谢，瑞安

后ROBERT的建议：

Adding inline-block to li element

响应TIM乙

宽度是动态的，在不同的页面，动态的每页不同，但他们不会改变在每个页面的基础上，除这些元素超出了展示箱的范围。就像当您将图片浮动到左侧并且文本位于图片右侧时一样，但一旦图片结束，文本就会一直延续到图片下方，一直到页面的右侧边缘，这就是我想要的。所以我想让li元素去到右边显示框的左边缘，但是通过框，我想去页面的边缘。文本本身符合这一点，但由于某种原因，李元素不认为有一个“对象”，以防止它停止并切入显示框。它不识别它的原因是因为正确的浮动显示框，它将正常流程中的东西打破，但我认为必须有一种方法来操纵显示框，以便它可以被识别或操纵li元素，以便他们可以识别显示框。

来源

2010-09-20 NightHawk

评论消失了，但Robert建议在li元素中添加内联块。这没有用。寻找更多的投入！谢谢，瑞安。 – NightHawk 2010-09-20 22:25:30

顺便说一句，我知道我可以限制ul/li的大小，但我有不同大小的显示框，所以我非常希望找到一个灵活的解决方案，我不必手动输入宽度。 – NightHawk 2010-09-20 22:29:07

删除它是因为我误解了这个问题。它会使它适合其内容，但这不是你所需要的。 – Robert 2010-09-20 22:31:12

如果你浮动一个元素而不是其他人，那么你会遇到这些问题。尝试浮动ul元素，并给出项目的宽度。

来源

2010-09-20 22:30:40

我当然可以漂浮ul元素，但是我不想给ul/li元素一个宽度的原因是因为（1）虽然它们在每个页面上的宽度相同，但我有几个页面将需要ul/li宽度不同。我曾考虑在每页基础上覆盖样式，但这留下了问题（2），这是因为某些显示框的宽度很大，理想情况下我希望将内容移动到页面的右边缘更多的内容填入一行），否则我会有一个长期不平衡的页面 - 这是否有道理？ – NightHawk 2010-09-21 13:42:07

设置宽度使用jQuery是一个选项？假设您要获取显示框的宽度，然后计算ul> li元素的宽度？由于脚本关闭的人不会看到正确的布局，因此不是理想的解决方案。 – 2010-09-21 13:47:13

问题（2）如果我设置了宽度，一旦li元素低于它就不会缠绕显示框？我想我也可以获得高度并在那里进行一些计算，但是这似乎有很多逻辑来实现文本内容自然而然地做的事情，只是容器不会相应地流动。我更喜欢纯粹的CSS解决方案，但它可能不可能？！ – NightHawk 2010-09-21 14:13:54

如果您知道右列的最大宽度是多少，您可以添加margin-right：00px;到列表项或列表本身。

来源

2010-09-21 08:34:57 Robert

右栏（显示框）根据内容的类型改变宽度。 – NightHawk 2010-09-21 13:36:10

所以右列宽驱动左列宽？ – ph33nyx 2012-07-23 20:29:52

@ ph33nyx是的，它的确如此。 – NightHawk 2012-07-25 03:16:07

由于文本是做你想做的，但不是包含它的LI，所以我在考虑将LI作为块级元素呈现（http://htmlhelp.com/reference/html40/block.html）。尝试将其设置为显示：inline-block。

来源

2012-07-23 20:37:00 ph33nyx

确实，它被设置为'display：block'，但将其更改为'display：inline-block'会将'li'移动到显示框下方，如上图所示。 – NightHawk 2012-07-24 03:49:45

左侧内容切入右侧浮动内容

回答

相关问题