在你的日常開發中遇到過哪些常用布局是無法用純 CSS 實現的？

01-03

以及如何判定這種布局是真的無法實現還是因為自己能力不足？

還記得我們第一次在 FrontPage 或者 Dreamweaver 寫的第一個頁面嗎，還記得曾經 box-sizing 都沒有的時代嗎？躲在學校機房的角落，我們如同孩子捏著泥人一般捏塑著心中的頁面，也捏塑著夢想。

很多年過去了，CSS 伴隨著青澀的我們一起成長，如今也已從一個懵懂泥人變成了亭亭玉立的少女，婀娜多姿。

CSS 發展到今天，毫不誇張的說，已經成為最廣泛的布局描述語言。從刀耕火種的 Table 布局到今天的 Flex 彈性布局，已經實現從傳統的一維排版到真正的二維布局的蛻變。

但美好外表下還是有諸多遺憾的，別說話（……）容我一一道來。

1. 多行文字溢出顯示省略號

幾乎每個人「CSS 人」都會遇到的疑惑。我們知道單行的通過 text-overflow: ellipsis 來實現：

.foo {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

但是多行的 CSS 規範中並沒有相關的功能。Opera 在非 Blink 內核的版本實現了私有的 text-overflow:-o-ellipsis-lastline，WebKit 也可以通過一些奇淫技巧來實現，於是有了這個 Demo：JS Bin - Collaborative JavaScript Debugging

2. 最大行數
@張立理提到控制文字寬度的問題，但更多時候我們更需要一個明確控制文字行數屬性，規範中有 max-lines 屬性，但至今仍無瀏覽器問津。CSS Overflow Module Level 3

3. 更好用的 Flex
Flex 對於最後一行的對齊控制以及顯性的間距控制也沒有實現，雖然規範作者 Tab 計劃在 Flex Level 2 中添加（https://wiki.csswg.org/spec/css-flexbox-2），但由於 CSS 戰線太長，也是遙遙無期。我之前的提議： https://lists.w3.org/Archives/Public/www-style/2013Apr/0016.html

4. 元素查詢（Element Queries）
媒體查詢遠遠不能滿足未來「精細化響應式」的需求，我們急需一個基於元素的響應式功能。社區中已經有相關討論和 Polyfill 了（Media Queries Are Not The Answer: Element Query Polyfill），我更喜歡 :media 偽類的語法

/* 當 header 寬度小於等於500px 時，nav 顏色設置為 #eee*/ header:media(width &<= 500px) nav { background-color: #eee; }

5. CSS 分頁滾動
CSS 在發布之初未曾預料如今的網頁有如此多的動畫和交互，而放眼望去，幻燈片（輪播）已然遍布大街小巷。雖然微軟（業界良心）率先發起的 CSS Scroll Snap Points 在一定程度上可以實現該需求，但還不能明確控制滾動的動畫效果。

該規範目前進行了較大的改動：CSS Scroll Snap Points Module Level 1

img {
width:500px;
}
.photoGallery {
width: 500px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
/* Sets up points to which scrolling
will snap along x-axis */
scroll-snap-points-x: repeat(100%);
/* Requires that scrolling always end at a snap point when
the operation completes (hard snap) */
scroll-snap-type: mandatory;
}

&
&
&
&
&
&
&

6. 非矩形布局

隨著越來越多的移動化手持設備的流行，CSS 布局已經不單單是矩形布局了，圓形的手錶，不規則的汽車顯示屏等。我們需要重新思考布局的概念了！當前主流瀏覽器已經支持了 shape-outside 屬性，但對於這些新興設備，我們更需要 shape-inside 屬性。更多請參見：CSS Round Display 草案：CSS Round Display Level 1

想想以後可以給特斯拉顯示屏寫個酷炫的儀錶盤，也是蠻激動的呢！

& #container {
shape-inside: display;
// the same as circle(50% at 50%, 50%) in a regular round display
}
#green-box { float: left; }
#blue-box { float: right; }
& &
&

Some inline content
&
with a float left and float right, in a
&
simple box with a circle shape-inside.
& &

（關於題主的疑惑，如果搜索過後，短時間內依然無法想出用 CSS 的解決方案，那就用 JS 吧。）

先寫這麼多吧，超過 100 贊再補充哈。

2015-11-30 更新：

8. 流式 Grid 布局

CSS Grid Layout 規範極大的增強了 CSS 二維布局的能力，但是該規範的特性更多的是偏向固定行列的布局。如果要實現響應式的流體布局，還得依靠 CSS3 Media Queries。

例如，一個4列2行間距 10px 的布局，用 CSS Grid 可以這樣來描述：

.grid { width: 430px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: repeat(2, 150px); grid-gap: 10px; line-height: 150px; } .grid &> div { background-color: #D0C2F5; text-align: center; }

如果當視口寬度變為 350px 時我需要顯示為3列，目前只能通過 Media Queries 顯性的設置「grid-template-columns」為3列來實現。

@media (max-width: 350px) { .grid { width: 100%; grid-template-columns: 1fr 1fr 1fr; } }

所以從這點來看，CSS Grid 並不能很好的解決響應式流式布局，斷點來適配還是一件比較繁瑣的事情。

為了解決這個非常常見的布局場景，規範中後來增補了 repeat( [ auto-fill | auto-fit ], ) [1]這個函數，我們可以直接這樣寫：

.grid { grid-template-columns: repeat( auto-fill, minmax(1em , 1fr) ); }

可惜的是目前還沒有瀏覽器支持，所以這種流式布局我覺得還是放在上文的 Flex 2 中來解決比較方便（CSS Grid 已經登陸 Chrome 57以及 Firefox 52啦！而且已經支持auto-fill | auto-fit了！）。

1: https://drafts.csswg.org/css-grid/#typedef-auto-repeat

瀑布流

我們拋開IE，直接看最前沿的瀏覽器的情況下，其實還是有不少事是CSS做不了的，與布局有關的包括但不局限於：

瀑布流。上面已經有不少人提到了，約2年前我還在某個群里和JK同學討論了一段時間的display: waterfall的提案，當然我這麼懶的人是不可能去寫提案的
滾動條寬度/高度判斷。有時候我們會有這樣奇葩的需求，要讓一個元素絕對定位的時候，如果有滾動條則不要蓋住滾動條，沒有滾動條則直接貼住邊緣。我們現在無法使用CSS判斷滾動條是否存在（我想有個:scrollable偽類）也無法得知滾動條的寬/高（哪怕像webkit那樣可以用偽元素自己定製樣式也好）
任意字體下的每行字元數限制。我們現在僅能保證在等寬字體的情況下使用ch單位（不知道除IE外的支持怎麼樣了）來控制每行字元數，但非等寬字體沒戲
精確的文字排版。現在文字排版還是交給瀏覽器「自以為是」地進行，並不能進行精確的控制，比如斷行、斷詞等都很難非常準確地控制，雖然有一些CSS屬性管理這些行為，但距離真正的印刷式的控制還差不少

精確地將一個 inline-block 的底邊對齊到距離基線特定長度的位置上。這是做數學公式排版的必要部分。寫 http://typeof.net 為了實現它搞到蛋碎一地……（話說我博客都多久沒更了？）

還有就是標點擠壓、Kashida 齊頭尾和割注這種排版特性了。

以前很多需要用JS實現的布局，現在也可以通過CSS實現了。

CSS不斷強大，也不斷可以產生新的特性，CSS3現在就可以很容易實現曾經靠JS才能實現的視差滾動。

也許不久後，瀑布流同樣可以通過CSS來實現。

css選擇器選擇父標籤。據說是css4 裡面考慮會添加，但是太長遠了。

上下自適應，下面元素隨上面元素的高度自適應

作為一個正在學習 CSS 的設計師，我想說為什麼不能有一個易用性極高的垂直/水平居中方法。

都能做出來，但常用的有兩種比較難辦到，一個是容器內垂直居中（多行文字），還有一個左右浮動塊高度保持一致。

父選擇器

只有body滾動的表格，甚至是類似excal的水平和垂直兩方面的表頭的滾動。

-----

視差確實可以用css，我刪掉了，又想到一個，橫屏滾動，Metro UI那樣的，不知道有沒純CSS解決方案？

其實無需判斷能否實現，因為永遠是能力不足導致的無法實現。假設你能力無限大，瀏覽器實現不了，你可以參與瀏覽器內核的開發，基本都是開源的，甚至可以參與討論W3C的標準。所以努力提高能力就好。

各種不能自適應高度。

中文豎排

需要兼容 IE 6 的話。。。

固定定位元素。未知寬度或高度元素的水平和垂直居中。 max/min width/height…

IE 8 和以下的話。。。

響應式布局。

IE &< 10 的話。。。

各種 flexes 各種 grids (grid 貌似也不兼容 Firefox)。。。

這些是確實不受支持的，瀏覽器的限制。

當然如果想在 canvas 上畫布局，沒 JavaScript 真不行。。。