如何在 table (CSS) 中禁用围绕元素的流动

Question

我在 table 有产品。每个都有标题、价格和缩略图。如果缩略图不同，价格元素会四处流动，有时在顶部，有时在底部。我想设置它总是在 table.

的右上角

图片我标了绿色，可以，红色怎么改。

Answer 1

发生这种情况是因为当产品图像足够窄以适合一行时，它会漂浮在红色标签旁边。要修复，请将 clear:left 添加到产品图片。

Answer 2

问题是您的每个目录图片都有 不同的宽度。您需要设置单元格宽度（推荐）或图像宽度，以便所有元素在您的 HTML 页面中以相同的方式排列。例如，如果您的最宽图像是 150 像素宽，而您的整个单元格计算为 300 像素，则每个单元格都应该有一个 width:300px; 属性。

Answer 3

在包含文章名称的 <td> 上添加一个 class "whatYouWant"

.whatYouWant{
    width: 100%;
    text-align: left;
}

Answer 4

您必须将缩略图和价格 div 设置为 'float:left' 并且 div 都应以“%”为单位指定宽度。例如，

.thumbnail{
   width:75%;
   float:left;
 }

.price{
  width: 25%;
  float:left;
 }

How to disable flow around elements in table (CSS)