我已經搬到了CSS從表，並具有襯裏的事情了

Question

背景故事

所以幾年前我的家庭的年輕成員一對夫婦的問題，我主持一個小網站上我NAS允許他們創建一份聖誕願望清單，其他家庭成員可以繼續選擇他們想要購買的產品，並將該產品標記爲防止雙重或錯誤購買。它運行良好，並且獲得了很大的好評，所以我試圖將它的佈局更新爲響應式，因爲有些人希望通過移動設備訪問它。這是基本的代碼，不是很安全，並使用表格。

因此，現在我正在嘗試更新網站，使其更具現代感和響應能力，以及一點點的安全性（我從來沒有遇到任何與網站混淆的問題，但這是一個潛在的威脅，開始之前寧願它扼殺在萌芽狀態。）

問題

我SELECT從MySQL數據庫中的所有行，並在列表中顯示出來。我曾經使用表格來保持它的全部佈局，並且看起來不錯，但我試圖轉移到CSS，以便網站可以更高效和響應。

我有基本的佈局排序，但我有一些棘手的問題。這裏是它現在的樣子小提琴：

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

我需要的是一個類似的佈局，這是怎麼以前看的時候有被用於佈局表：

返回的每一行都放入一個像這樣的表格中，一個放在另一個表格樣式下。但是現在我擺脫了CSS的表格，我掙扎了一小會兒。

我目前遇到的主要問題是：

• 項目名稱不被限制，並溢出container股利。我需要它優先縮放，用省略號溢出，或者如果需要的話，換行換行。正如你可以在小提琴中看到的那樣，它會離開屏幕的邊緣。
• 可能由於上述問題，價格div不在名稱div同一行，我需要他們在同一行上，我試圖將它們都包裝在一個容器div和設置那對display:inline-flex，這並沒有把兩個並排，但我不能強制名稱div左側的文本對齊，並溢出仍然發生，價格字段似乎垂直對齊頂部對，但我希望它們垂直對齊。
• comments div有時會包裝在圖像和評分字段下，這在字段中顯而易見，因爲comments div顯示在其餘字段下。這不是一個太大的問題，因爲當網頁縮小時（比如在手機上），我希望更改佈局，以便隱藏註釋，直到單擊按鈕以顯示它們。但是當屏幕足夠大時，我想要圖像和評分div佔據左側，如上圖所示，所以comments div應該是該類別的寬度和網站div的總和。

Answer 1

問題＃1

.container有空白：NOWRAP;所以內容在到達邊緣時不會換行。將其設置爲包裝或預包裝。

.container { 
white-space: wrap;} 

問題2

。名稱必須是浮動：左，所以它會佔用空間，圖像的直接權利，允許價格浮動到右邊的空間。

所以它也需要有一個寬度分配給它，以允許其他元素空間。嘗試像50％，然後調整。

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

問題＃3

這可以通過使用明確的div有明確的解決：兩者並用它們含有的div內容外分隔，裏面沒有像你使用。

這應該讓你回到正軌。 https://jsfiddle.net/0q10uhw1/15/