內聯塊，不排隊

我無法讓我的div水平排隊。內聯塊，不排隊

這裏是我的HTML文檔：https://gist.github.com/Keenangp/9def2bd08eb6244bcf2d 我沒有足夠的代表處發佈的樣式表太多，但有云：

.container { 
    width: 80%; 
    margin: auto; 
    } 
.column { 
    display:inline-block 
    } 
.image { 
    display:inline-block 
    }

這裏的頁面：keenansportfolio.bitballoon.com/about

我在嘗試以前的解決方案時嘗試過的一些事情：

當我在Chrome開發工具中檢查div時，發現內聯塊屬性已經是appl ied，並且控制檯中沒有錯誤。我嘗試刪除容器規則，刪除容器div，所以其他div不嵌套。我試過使用較小的圖像，將屬性與float：left結合起來，並將class> direct descendant作爲選擇器應用內聯塊。我也嘗試每個div本身，並應用vertical-align：top屬性來防止基線干擾，並在不同的瀏覽器中打開它。

這是一個練習，我沒有被告知編輯任何其他值或添加任何其他屬性。我有點難住。

來源

2016-03-25 Keenanp

如果我理解正確，您想要對齊連續的三列。

你必須設置每個列的寬度和這些的總和不應超過容器的寬度。設置所有三列的寬度（例如：32％），如果你想對齊它們，即使它們的寬度總和超過了容器的寬度，將這個屬性添加到容器;空格：NOWRAP。

來源

2016-03-25 07:43:18

嘿Inpyo，編輯工作的寬度！這確實應該包括在練習中。問題：當我包含white-space：nowrap屬性時，我的文本就會像屏幕上應用文本而不是空白一樣在屏幕上亂成一團。 – Keenanp

@Keenanp您是否將它應用於容器？如果你這樣做了，這個問題可能是由繼承造成的。您可能需要刪除該屬性並將其設置爲正確。 –

您必須爲「圖像」，「列」類設置'div寬度'。例如，

.image, .column 
    { 
    display: inline-block; 
    width: 30%; 
    }

來源

2016-03-25 07:44:38 WisdmLabs

非常好，這工作。出於某種原因，我無法堆疊圖像和列選擇器，但是當我將它們分成不同的規則時，它就起作用了！謝謝你很多。 :)（編輯：當你回答時，我想知道是否是這個問題，並開始尋找自動適應文本框的方法。百分比解決方案是現貨） – Keenanp

內聯塊，不排隊

回答

相關問題