無法找到卡片不在網格格式內的原因

[英]Cannot locate why the cards are not staying within the grid format

我正在嘗試制作一個響應式網格，其中包含卡片，但是，我終生無法弄清楚為什么卡片不能正確地放入列中。 使用grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 由於未正確裝入列中，卡片最終會溢出容器。 我也試過grid-template ...

為什么 text-overflow 不是 function 在網格中有一個 div？

[英]Why does text-overflow not function with a div in a grid?

我試圖讓我的設計具有響應性，這樣當屏幕寬度變小時，文本應該被三個點“截斷”。 但是，在我的情況下，這似乎不是 function，因為 .container 元素似乎只是溢出到主元素中，而不是文本變小。 我該如何解決這個問題？ 提前致謝！ ...

無法使用網格和樣式組件正確渲染反應分屏組件

[英]unable to properly render a react split-screen component using grid and styled-components

我剛剛學習了如何創建一個分屏（2 個屏幕）組件，該組件在父容器上使用“display: flex”，在其子容器上使用“flex: 1”來生成左組件和右組件。 現在我正在嘗試創建一個分屏（5 個屏幕）組件，它使用“顯示：網格”來生成 3 列和兩行，左側邊欄占據第一列，兩行和其他四個屏幕各占向上 1 列 ...

如果缺少某些 div，如何填充網格行？

[英]How to fill the grid row if some div is missing?

我正在使用 tailwindcss 和這個 html： 回復：https://play.tailwindcss.com/L8McFjGBVC<div class="grid grid-cols-12"> <div class="col-span-4 bg-red-300"&g ...

創建一個網格，其中網格項具有最大寬度但在設備寬度上仍然等距

[英]Create a grid where the grid items have a max-width but are still equally spaced across the device width

我正在嘗試創建一個間距為1fr 1fr 1fr的（2 行 - 3 列）網格。 在每個網格項中都有一個<img> ，其max-width: 512px 。 我給了網格一個margin: 0 3.75rem 。 現在我遇到了網格項目大於網格項目內容 (512px) 的問題。 我怎樣才能制作一 ...

我的 flex box 項目沒有定位在我想要的位置

[英]My flex box items are not positioning where I want them to

我試圖根據我指定的具體位置對齊我的網頁設計（作為 JPG 附件）上的副標題和正文。 我使用 Photoshop 設計了該頁面，目前正在對 position 中 CSS styles 中的 flex 容器中的元素使用像素測量。但是，我還想實施一個斷點，該斷點將在特定屏幕尺寸下改變網頁的樣式。 我不確定 ...

我的animation重復了幾次css的動作

[英]My animation repeats the movement several times in css

我有一個 animation，當我 hover 在元素開頭的 div 上它一直重復時，它會卡住重復自己。 #servicios { text-align: center; } #servicios ul li { list-style: none; }.grid-container { displ ...

如何讓我的網格布局部分每個跨越 4 列？

[英]How can I make my grid layout sections to span 4 columns each?

我正在嘗試網格布局，但似乎無法讓左側、中間和右側各跨越 4 列，沿着 12 列網格中的同一行。 .container { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(100px, aut ...

使網格項跨越所有行而不影響其他網格項

[英]Making a grid item span all the rows without affecting the other grid items

我正在嘗試制作一個動態網格，其中每個新項目都進入單個列內的新行，但最后一個項目必須分成一個新列並填充整個網格列，而不會影響第一列中的其他行. 請注意，項目的數量是動態的，所以我不能使用任何固定值和選擇器來定義布局。 我正在尋找的布局： 我試過的如您所見，第一列中的行具有相同的高度。 我希望第一列第 ...

防止 CSS 網格行高隨動態內容增長

[英]Prevent CSS grid row heights growing with dynamic content

是否可以定義一個 CSS 網格，其中自動行（其中的動態數字）的大小僅基於它們的數量，即填充可用的垂直空間 - 然后包含該垂直空間內的任何內容。 見下文，左側顯示了當內容不會導致行增長時分配的相等行高大小。 右邊是問題 - 長文本導致高度然后變得不相等。 代碼在這支筆： https://codepen ...

帶有重疊文本框的主圖

[英]Hero image with overlapping text box

我正在嘗試制作一個具有重疊文本框的主圖，但我正在努力讓它按照我喜歡的方式工作。 如果不將網格行高更改為較大的數字，我無法讓英雄高度匹配我想要的大小。 我也無法讓文本框不覆蓋大部分圖像而不用大數字做另一個行高。 這就是我想要實現的目標： 這是我到目前為止的代碼： .shell { display: ...

如何在CSS Grid中並排設置li的

[英]How to set li's side by side in CSS Grid

我需要將 li 並排放置，但我很難做到這一點。 .logo { display: grid; grid-column: span 2; justify-content: start; }.logo h4 { grid-column: 2; } nav { display: grid; } ul { ...

CSS-grid：自動跨越項目

[英]CSS-grid: automatically span items

這個賞金已經結束了。 此問題的答案有資格獲得+50聲望賞金。 賞金寬限期在1 小時后結束。 Dill正在從信譽良好的來源尋找答案： 我很確定這是不可能的。 我想 go 當然可以。 有沒有辦法讓網格項自動跨越所有可用空間？ 例如這里，網格有兩行和兩列。 在第一行中，第二列是空閑的，所以我想跨越該項 ...

如何在網格末尾插入div？

[英]How to insert div at the end of a grid?

我有以下代碼： .my-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-gap: 20px; }.item { background-color: #ddd; hei ...

為什么我的javascript應用css網格屬性很快就消失了？

[英]Why is my javascript applying css grid properties quickly disappearing?

我正在嘗試使 JS function 在調用時將 css 網格模板的值設置為來自表單的信息，但是當我調用它時，網格出現並在一秒鍾內迅速消失。 從很短的時間來看，我還可以看到它只生成行而不生成列。 編輯：我在下面添加了一個代碼片段 let container = document.getElemen ...

如何使用 CSS 響應式地將任意元素移動到側邊欄

[英]How to move arbitrary elements into sidebar responsively using CSS

我有一個布局，其中有 N 個塊元素。 這些元素垂直堆疊（正如塊元素所預期的那樣），這是我對小屏幕的期望......但是，在大屏幕上我想將一些元素移動到側邊欄（僅使用 CSS）。 我在想也許這可以通過顯示網格實現？ 還是 CSS 技術的其他一些組合？ 這是一個片段.. 樣式只是為了給 div 一些顏色 ...

我的 HTML 和 CSS 網格不工作？ 網格的各個部分似乎都是堆疊的

[英]My HTML and CSS grid isn't working? The sections of the grid all appear to be stacked

我已經創建了一個網格，目前它應該只有 4 行，所以為了查看我向它們添加了邊框的行，但是我只看到了一條線，而不是網格中不同 div 的邊框。 *{ margin: 0; padding: 0; box-sizing: border-box; } body,html{ overflow-x: hidd ...

我無法在 CSS 網格布局中對齊導航欄，我該如何解決？

[英]I am having trouble aligning my navigation bar within my CSS grid layout, how can I fix this?

我目前正在從事 web 開發訓練營項目，我需要在其中創建一個致敬頁面。 我已經設計了頁面並開始處理 HTML 和 CSS 文件，但我遇到了一個我似乎無法解決的問題。 我使用的是 CSS 網格布局，導航欄應該從第二列開始，但它延伸到了網格邊界之外。 我已將 each.item 定位到網格中它們自己的 ...

在保持寬高比的同時使用瀏覽器縮小或放大 HTML 元素

[英]Make HTML element scale down or up with browser while keeping aspect ratio

我在 A4 紙上銷售貼紙，我有很多客戶詢問我可以在“特定尺寸”獲得多少貼紙。 我正在制作一個頁面，您可以在其中輸入貼紙的長度和寬度，它會計算出 A4 紙上可以容納多少張該長度和寬度的貼紙。 紙張為 210x297mm。 我總是必須在所有設計上留出 2 毫米的邊框，並在每個徽標之間留出 2 毫米的空間 ...

css中的定位元素

[英]Positioning elements in css

可視化我需要編程的內容對可視化中顯示的內容進行編程的理想方式是什么？ 我需要 h1 和那個 h1 下的一個段落，h2 和那個 h2 下的一個段落在左側，圖像在右側使用“float：right”，但我無法實現它. 另外，我需要整個“容器”出現在網頁的中間，就像在圖像上一樣。 如果有人能提供幫助，我會很 ...