Question

如果两个div在表格单元格中浮动，并且文本很短，则它们会漂浮在同一级别上。

但是当第二个div有更长的文本时，2个div现在不会浮动在同一个级别上。

为什么这样以及如何使其工作，而没有为第二个div指定硬编码宽度？（因为如果其他表格单元格更宽或不宽则需要动态宽度）< / p>

代码示例如下： http://topics2look.com/code-examples/two-floats-in-a-table/

第一个hello向左浮动（它实际上应该是使用CSS图像精灵的+或-的图像，但这里只是简单了）。 “世界世界”应该是描述并且漂浮在图像旁边。

所以第一张桌子都没关系。但在第二个表格中，它有“世界世界......世界”，而且很长。现在第二个div不会在它旁边浮动但是会在第一个浮点下浮动。有没有办法让它更好地收缩包装，以便它漂浮在第一个div旁边？

Answer 1

不要浮动第二个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>

Answer 2

您浮动的任何元素都将成为块级元素。这就是为什么当两个块太宽而不能彼此相邻时，第二个块浮动在第一个块下面。

我不知道在这种情况下有一个解决方案没有设置元素的宽度，但我很想知道你想要实现的目标。

Answer 3

我的猜测是，有一种更好的方法来完成你想要做的事情。我也很好奇你的目标是什么;花花公子完全按照这种方式工作。

如果你必须让它们在这个范例中动态调整大小，你可以随时使用javascript。

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

3 个答案: