html - 我已经从表格转移到 CSS，并且在排列方面遇到了一些问题

Question

背景故事

所以几年前，我在我的 NAS 上为我的年轻成员托管了一个小网站，让他们可以创建一个圣诞愿望 list ，然后其他家庭成员可以继续选择他们想要购买的东西，并且将商品标记为自己的，以防止重复购买或错误购买。它运作良好，并受到热烈欢迎，因此我正在尝试更新它的布局以响应某些人希望从移动设备访问它的情况。这是基本代码，不是很安全并且使用了表格。

所以现在我正在尝试更新网站，使其更现代、 react 更灵敏，同时也更安全(我从来没有遇到过有人乱用网站的问题，但这是一个潜在的威胁，所以我会而是在它开始之前将其消灭在萌芽状态。)

问题

我SELECT MySQL 数据库中的所有行并将它们显示在列表中。我曾经使用表格来保持布局和美观，但我正在尝试转向 CSS，以便网站可以更高效和响应更快。

我已经对基本布局进行了排序，但还有一些棘手的问题。这是它现在的样子:

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

我需要的是类似这样的布局，这是在布局中使用表格时的样子:

返回的每一行都被放入一个这样的表中，一个在另一个下，列表样式。但是现在我要摆脱表格而不是 CSS，我有点挣扎。

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

• Item Name 未受约束且溢出 container div。我需要它最好缩放，用省略号溢出，或者如果需要的话，换行到一个新行。正如您在 fiddle 中看到的那样，它超出了屏幕的边缘。
• 可能由于上述问题，价格 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 需要是 float:left，所以它会占用图像右边的空间，让价格 float 到右边的空间。

因此它还需要分配一个宽度以允许其他元素留出空间。尝试 50%，然后进行调整。

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

第 3 期

这可以通过将清晰的 div 与 clear:both 一起使用并将它们用作包含 div 的内容之外的分隔符来解决，而不是像您使用的那样在内部使用。

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