对于CSS，为什么一个表单元格中的2个浮点数不在同一级别上？

问题描述

| 如果两个div浮在一个表格单元格中，并且文本很短，则它们很好地浮在同一级别上。 但是，当第二个div包含更长的文本时，两个div现在不再浮动在同一级别上。 为什么要这样做，又如何在不为第二个div指定硬编码宽度的情况下使其起作用？ （因为如果其他表单元格更宽或不那么宽，则需要动态宽度） 一个代码示例在： http://topics2look.com/code-examples/two-floats-in-a-table/ 第一个问候向左浮动（使用CSS图像精灵，它实际上应该是

+

或

-

的图像，但是在这里只是简单了一点）。 \“ world world \”应该是描述并且很好地浮动在图像旁边。 所以第一张桌子还可以。但是在第二张表中，它具有“ world world world ... world”并且相当长。现在，第二个div不会在其旁边浮动，而是会在第一个div下方浮动。有没有一种方法可以使它更好地收缩包装，以便它很好地漂浮在第一个div旁边？     

解决方法

不要浮动第二个div，然后向其添加

overflow: hidden;

（或自动）以使其成为新的块格式化上下文，应实现您所需要的： CSS：

body { 
   font: 16px Verdana,sans-serif;
}

#main-content { 
   width: 600px; 
   border: 6px double black; 
   margin: 20px 0;
}
table { 
   border: 6px double orange;
}

table div { 
   float: left; 
   padding: 4px;
}

table div+div {
   float: none; 
   overflow: hidden;
}

HTML：

<table>
   <tr>
      <td><div>hello</div> <div>world world world world world world world world world</div></td>
      <td><div>hello</div> <div>world world world world world world world</div></td>
   </tr>
</table>

    ,浮动的任何元素都将成为块级元素。这就是为什么当两个块太宽而无法彼此相邻放置时，第二个块浮在第一个块之下的原因。 我不知道在这种情况下没有设置元素的宽度的解决方案，但我很好奇知道您要通过此实现什么。     ,我的猜测是，有一种更好的方法可以完成您想做的事情。我也很好奇你的目标是什么？浮动是完全有理由的这种方式。 如果您绝对必须在此范例中动态调整它们的大小，则可以始终使用javascript。