css-multicolumn-layout

0熱度

1回答

我試圖用Flexbox的做到這一點=> 桌面： | | | block 1 | | block 2 | | | | block 3 | 移動： block 1 block 2 block 3 我來到這個 .cont { display: flex; flex-direction: column; flew-wrap: wrap-reverse;

2熱度

2回答

爲什麼column-fill屬性不起作用？

我正在嘗試創建一個帶有「2列」文本的DIV。所以我使用的列XXX性，但列填充爲「自動」設置似乎並沒有像預期的那樣。第一列應該在第二列之前全部填滿，而不是平等。即使w3schools上的示例也沒有按預期行事。 https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_column-fill 這是我的html頁面： <html> <

1熱度

1回答

iOS上的css列以外的圖像

我使用CSS列來顯示各種寬度和高度的圖像，以便它們在沒有大的空格的情況下一起流動。它適用於桌面瀏覽器，但在iPad和iPhone上（使用iOS Chrome），列表中的最後一張圖像不在列的外面，出現在圓柱形容器的右側。我一直在排查故障的屬性，不能讓iOS服從。示例頁面：https://gohbavote.ca/round-1/entry-26 這裏的HTML： <div class="post

0熱度

1回答

多列CSS不能正常破解

我有一個CSS多列：它在Firefox中很好（<ul>內容不是'破碎'），但沒有在Chrome上（應該在第一列的一些項目被分割爲第二列）。環顧四周，我發現this solution，但它似乎並沒有在我放置代碼的任何地方工作。這是一個完整的片段： .margin-bottom-0 { margin-bottom: 0; } .double > ul { columns: 2;

0熱度

1回答

爲什麼column-fill屬性不能像「auto」那樣按預期工作？

我創建了一個帶有「2列」風格的html頁面，其中列填充屬性設置爲「auto」。因此，第一列應該在第二列之前全部填滿，而不是等同平衡（當「column-fill = auto」時）。 The code不表現爲預期： HTML代碼： <html> <body> <div id="wrapper"> <div class="livre"> <div class="

0熱度

1回答

CSS多列布局可防止高度發生變化時移動列

嘗試計算在更改列高度時如何防止列移動。看的jsfiddle，嘗試點擊3欄鏈接查看：https://jsfiddle.net/g305643f/1/ 如果你想提供與非多列的解決方案 - 建築物立柱的這個任務可以用下面的條件下，其他的方法來實現：在桌面上，我們需要這樣的： 1 3 5 2 4 在平板電腦： 1 4 2 5 3 沒有鰭d解決方案與Flex /浮動/嵌入塊，使它與多列，現

0熱度

1回答

如何讓項目數（動態）不會突破CSS列？

有column-count，但我不知道是否有作爲「項目數」的CSS列內項目這樣的事情？我在嘗試保留3列常見問題解答中固定的項目數量時遇到問題，而未指定列的高度。在這個例子中，我想對每列有3個項目，無論在每個項目的問題或答案有多長。在實際的網站中，我不知道確切的項目數量，所以我只想讓它們保持「平衡」。你可以看到，我嘗試使用Flexbox的但得到的答覆面板將舉辦動態內容（也一樣有問題/項目數）。我

0熱度

2回答

打印多個列

我有一個具有排的大量簡單的2列的表的薄HTML表格： <table> <tr><td>row 1 column1</td><td>row 1 column2</td></tr> <tr><td>row 2 column1</td><td>row 2 column2</td></tr> [500 more rows] <tr><td>row 4999 column1</td><td>row

1熱度

1回答

Flexbox環繞 - 滾動隨100vh機身消失

我正在用flexbox構建多列頁面佈局，感覺有點響應。這是我的代碼。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Index</title> <link rel="stylesheet" href="basic.css"> </head> <body> <header c

-1熱度

2回答

將列表項目放在兩列中，移位50％

我試圖將列表項放置在兩行中，以便從最下面一行的項目向右移動50％。該項目的順序也很重要，並應該像下面的圖片：下面是代碼，我想出了： https://codepen.io/Deka87/pen/qVgjGv ul { list-style: none; padding-left: 0; margin-bottom: 0; column-cou