我已经从Table转移到了CSS，并且遇到了一些问题，

Question

背景故事

几年前，对于我家的年轻成员，我在我的NAS上主持了一个小网站，允许他们创建一个圣诞愿望清单，其他家庭成员可以继续选择他们想要购买的东西，并且将该项目标记为他们的项目以防止双重或错误购买。它运行良好，并且受到了极大的欢迎，因此我尝试更新它的布局以便响应，因为有些人想要从移动设备访问它。它是基本代码，不是非常安全和使用表。

所以现在我正在尝试更新网站，使其更具现代性和响应性，并且有点安全（我从来没有遇到任何与网站混乱的问题，但这是一个潜在的威胁所以我会而是在开始之前把它扼杀在萌芽状态。）

问题

我SELECT来自MySQL数据库的所有行，并将它们显示在列表中。我曾经使用表来保持所有布局并且看起来不错，但我正在尝试转移到CSS，以便网站可以更高效和响应。

我已经对基本布局进行了排序，但我遇到了一些问题。这是现在看起来的小提琴：

https://jsfiddle.net/0q10uhw1/11/

我需要的是一个类似于此的布局，这是用于查看布局时使用的表的方式：

返回的每一行都被放入一个表中，一个在另一个表中，列表样式。但现在我已经摆脱了桌子而不是CSS，我有点挣扎。

目前我遇到的主要问题是：

• 项目名称没有受到约束，并且溢出了container div。我需要它优先缩放，溢出省略号或者如果需要，自动换行到新行。正如你可以在小提琴中看到的那样，它正在走出屏幕的边缘。
• 可能由于上述问题，价格div与名称div不在同一条线上，我需要在同一条线上同时使用它们，我试过包装它们都放在一个容器div中并设置为display:inline-flex，这确实将两个并排放置，但是我不能强制将左边的Name div用左文本对齐，溢出仍然发生，价格区域似乎垂直对齐右上角，但我希望它们垂直对齐。
• comments div有时会包含在图像和评级字段下，这在字段中是很明显的，因为comments div显示在其他字段下。这不是一个太大的问题，因为当网页按比例缩小时（例如在手机上），我希望更改布局，以便隐藏注释直到单击按钮显示它们。但是当屏幕足够大时，我希望图像和等级div占据左侧，如上图所示，因此comments div应该是类别的宽度，网站div已合并。

Answer 1

问题＃1

.container有white-space：nowrap;所以内容在到达边缘时不会被包裹。将其设置为换行或预换行。

.container {
white-space: wrap;}

问题＃2

.name需要浮动：左，因此它将占用图像右侧的空间并允许价格浮动到右侧的空间。

因此，它还需要为其分配宽度以允许其他元素空间。尝试50％，然后调整。

.name {
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
float:left;
width:55%;}

问题＃3

这可以通过使用clear clears清除：两者并将它们用作包含div的内容之外的分隔符来解决，而不是像你使用过的那样。

这会让你回到正轨。 https://jsfiddle.net/0q10uhw1/15/