提問搜尋_PHP中文網

社群學習工具庫休閒

繁体中文

熱門搜尋：
PHP
MySQL
jquery
HTML
CSS

CSS 網格佈局，自動新增行並將列寬度設定為最大網格項目寬度

我想要一個具有任意數量的網格項目的網格佈局，當一個網格項目被填充時，它會自動創建一個新行，有點像：#grid{display:grid;width:256px;border:1pxsolidblack ;grid-gap:12px;grid-template-columns:repeat(auto-fit,minmax(75px,1fr));}#gridspan{background-color:lig

P粉818317410 2024-03-28 11:13:36

限制內容擴展的網格項

TL;DR:是否有類似table-layout:fixed的CSS網格佈局的屬性？我試圖創建一個年視圖的日曆，其中有一個4x3的大網格用於月份，內部嵌套的是7x6的網格用於日期。日曆應該填滿整個頁面，所以年份網格容器的寬度和高度都設定為100%。 .year-grid{width:100%;height:100%;display:grid;grid-template:repeat(3,1fr)/r

P粉199248808 2023-08-20 19:49:37

為什麼具有固定寬度和最大寬度為90%的網格子項會溢出網格軌道？

問題：我的問題非常簡單，我想知道為什麼.header元素在達到1500像素的視窗寬度時會溢出其網格軌道。程式碼：*{box-sizing:border-box;padding:0;margin:0;}body{background:#6e28d9;color:white;}.container{display:grid;grid-template-areas:'header'; grid-templa

P粉471207302 2024-04-05 14:33:39

行不均勻的 CSS 網格（Pinterest 風格）

我正在嘗試創建一個3列多行的連結網格（img+文字）。問題是我的圖像高度不一樣，所以我得到這樣的結果：我正在嘗試尋找需要什麼CSS網格屬性才能獲得這樣的結果。我嘗試只做3個div（每列），其中包含多個鏈接，但響應時順序不正確。你們能幫忙嗎？非常感謝。

P粉710478990 2023-09-09 14:12:15

無法使用 svg 影像建立響應式網格區域

當我嘗試建立一個包含svg圖像的響應式網格區域時，我遇到了奇怪的行為，例如任意網格區域寬度，以及無法讓圖像增大或縮小到某個點而不停止。我得到的最接近的是：*{box-sizing:border-box;}body{margin:0;}header{display:grid;grid-template-columns:auto1fr;background-color:green;padding:1r

P粉022140576 2023-08-30 19:15:16

讓網格單元格內容居中對齊

我想在網格項內部居中對齊內容，水平居中但垂直不居中。在JSfiddle上查看：http://jsfiddle.net/6zs8ydhf/.container{display:grid;grid-template-columns:200pxauto;grid-template-rows:400px200px;}.item{border:1pxsolid#111;}. item2h1{display:f

P粉060528326 2023-09-15 10:34:15

CSS Grid佈局：將跨越多行的元素的基線與其他列的底部行對齊。

我想對齊目錄的基線。 #grid{display:grid;grid-template-columns:1fr1fr;align-items:baseline;}#a{grid-row:1/span2;grid-column:1;padding:8px;background:red;}#b {grid-row:1;grid-column:2;background:yellow;}#c{grid-row

P粉032649413 2023-08-02 15:26:53

為什麼使用網格模板區域顯示網格不起作用？

我試圖透過網格模板區域實現元素排列，但它不起作用。我正在嘗試使用網格系統垂直和水平排列塊。使用左側的圖片和另一側的文字。為什麼這段程式碼不起作用？ .news__wrapper{display:grid;grid-template-areas:"aac""bbc";}.news__item{display:flex;align-items:center;just

P粉541796322 2023-09-09 16:28:13

如何將網格元素放置在容器的尾部

我有一個網格容器，我希望我的項目放在底部。我有這個實際的我想要這樣的期望.container{display:grid;grid-template-columns:repeat(14,1fr);grid-template-rows:repeat(6,1fr);grid-gap:8px; width:200px;background:blue;}.item{background-color:red;c

P粉387108772 2023-08-28 13:48:05

如何使用 CSS 網格在我的 div 中實現網格系統？

我想建立一個包含2列的div，當我在父div中新增一個項目時，它應該位於第一列中，當第一列有3個元素並且我想要新增其他項目時，它應該位於第二欄。這是我正在尋找的圖像：我在互聯網上沒有找到回應，我嘗試過css網格生成器，但沒有任何結果..CSS網格生成器，但我無法得到正確的答案

P粉195200437 2023-09-08 16:03:49

右側對齊網格元素的方法

我在CSSGrid佈局中有固定數量的列，並且有要放置在這些列中的元素。要放置的元素數量小於列的數量。我希望這些列向右對齊，並按照元素添加的順序。在下面的程式碼中，有4個元素向左對齊，其右側有6個空元素：.hello{border-style:solid;border-color:blue;}.container{display:grid;grid-gap: 5px;grid-template-colum

P粉296080076 2023-08-13 11:27:01

grid-template-rows: Repeat(auto-fill, 80px) 可以與 grid-auto-rows: 80px 互換使用嗎？

我希望網格在添加動態內容時根據需要添加更多行。這就能解決問題：.grid{display:grid;grid-template-rows:80px;grid-auto-rows:80px;//grid-template-rows:repeat(auto-fill,80px);grid-template- columns:repeat(auto-fit,minmax(340px,1fr));grid-

P粉823268006 2023-09-12 21:10:45

裁剪和移動影像。網格佈局

我正在努力將圖像放在正確的位置並將其裁剪在頂部和底部。這就是它應該看起來的樣子（英雄部分）：https://www.behance.net/gallery/161732057/CozyMornings-online-store整個專案是在網格上建造的。我需要一個向左移動的圓形圖像，大於容器並在頂部和底部進行裁剪。此外，它應該具有響應能力。我試圖將圖像放入包裝中。給這個包裝器相對位置並隱藏溢出。這不

P粉548512637 2023-09-15 19:18:46

導航元素不受display: grid影響

我在一個設定為網格顯示的導覽列中有一些ulli元素，但它不像我預期的那樣工作。 li元素顯示出來好像沒有套用網格。這是代碼：*{padding:0;margin:0;}.grid-container{display:inline-grid;grid-auto-columns:autoautoautoauto;text-decoration:none;}.grid-containerli{list-s

P粉295728625 2023-09-20 12:05:51

CSS網格佈局方格單元格

我想要建立一個類似儀錶板的視圖，其中使用CSSGrid-Layout作為基礎。我希望在整個螢幕的長度上分佈16列（應該是響應式的）。然後，單元格的高度應該由單元格的寬度決定，以使單元格成為正方形。問題是，我希望某些單元格跨越多個單元格。例如，我想要一個佔用2x1個單元格的元素。所以我有基本的網格佈局：.grid-container{display:grid;grid-template-column

P粉593536104 2023-08-15 20:13:32

網格模板列不對齊行上的項目

我是HTML和CSS新手，我正在嘗試使用grid-template-column建立導覽列。我的想法是將導覽列分為3個部分：徽標部分、網站主頁部分和社交連結部分。問題在於divnavBar內的元素未連續對齊，但menuItemsdiv內的div和Socialsdiv內的元素正確對齊，但它們之間的間距太大。我缺少什麼嗎？ html{background:#FFFFFF;}body{background

P粉696605833 2024-04-03 16:58:18

Div 使用 JavaScript 旋轉和展開以顯示網格圖庫

我想讓一個div旋轉onclick以顯示背面的網格畫廊。老實說，我不知道從哪裡開始。 <ulclass="container-fluidtext-centerrow"id="gallery2"><liclass="col-12col-sm-4col-md-12text-center"><imgsrc=&quot

P粉398117857 2024-04-02 23:12:45

我無法設定使用 Tailwind CSS 建立的儀表板的網格結構

我正在使用TailwindCSS編寫儀表板前端。我創建了頁面的網格結構並將我的元件放置在其中。然而，所有列的寬度和長度都是相等的。有些元件通常需要看起來更寬，所以我添加的一些元件與Figma檔案不符。我該如何解決這個問題？我的頁面的程式碼：//Components//LayoutsimportDashboardLayoutfrom"@/layouts/dashboard"//I

P粉186904731 2023-09-10 18:06:41

如何製作網格佈局擴充的動畫？

我想知道如何為網格佈局的擴展設定動畫。正如你在程式碼中看到的，我有4個div。其中兩個會顯示，另外兩個僅在選取該複選框時才顯示。選中該複選框後，將新增另一行，其中包含div3和div4。我如何使擴展動畫化？最好保持網格的大小。我不希望動畫影響（不存在的）邊距。我也想在沒有JavaScript的情況下做到這一點。可能嗎？ <!DOCTYPEhtml><html><head&

P粉937382230 2023-08-31 21:09:37

自訂Angular Material UI CSS樣式

我想用貼在下面的墊子網格瓷磚和已佈線的瓷磚作為普通墊子網格瓷磚的內容。問題是，當我使用墊子網格瓷磚時，中心顯示的潛在設計，以及注意到底部的方式。從行順序停用後，所有

P粉696146205 2023-08-02 21:58:40