標簽[flexboxgrid] - 堆棧內存溢出

[英]How to place an icon next to text and centering a header

我正在嘗試將圖標放置在圖像中的文本左側。現在出於某種原因，它位於文本之上。該圖標位於帶有文本的選項卡內，我希望圖標針對每個選項卡進行更改。即使我改變邊距，它們也不會移動。 Senconly，我在 header 中有一個圖像和文本，它在谷歌瀏覽器中看起來不錯，但是當我更改瀏覽器時，它們會堆積 ...

如何使用 flexbox 指定兩個 div 必須一起換行？

[英]How can I specify with flexbox that two divs have to break line together?

如何使用 flexbox 指定兩個 div 必須一起換行？我在下面的示例中想要的是，當屏幕變小時，綠色和黑色 div 總是一起跳到新行，而不必將它們嵌套在新的 div 中，這會使代碼復雜化和擴展。 .categories-home-block { display:flex; width: 10 ...

我正在嘗試並排對齊電影卡。但他們在列中對齊

[英]I am trying to align movieCards side by side. But they are aligning in a column

這是我的電影列表組件。我在 div 部分嘗試了不同的屬性來連續獲取卡片。但是所有的卡片都在一個列中對齊。我應該使用彈性還是網格。如果是，我該如何使用它們。即使我為此參考了很多資源。但對我沒有用。我應該怎么做才能如願以償。請幫助我。這是電影卡組件請幫我解決這個問題。謝 ...

FlexBoxGrid2 行問題

[英]FlexBoxGrid2 issue with rows

我正在使用 FlexBoxGrid2 做一個項目，但行有問題。我需要添加很多行，一個接一個，但是添加第二行我發現它位於第一行的后面，而不是我需要的下面。刪除“位置：固定；” 在 CSS 中，“header_container”有助於解決這個問題，但我需要修復第一行（導航欄）。請告知是否有任何解 ...

間隙屬性的 CSS flexbox 間距問題

[英]CSS flexbox spacing issues with gap property

我在使用 flexbox 時遇到問題。當我使用屬性間隙時，它會使列太寬嗎？我正在嘗試創建一個簡單的 3 列行。我以為間隙值不會影響寬度設置？ IE。 flex: 0 1 33.33% 和 gap 2rem 會自動調整寬度嗎？有人會對此問題有任何解決方案嗎？這是示例 - https ...

Flexboxgrid 和間隙溢出問題

[英]Flexboxgrid and gap overflow issue

我使用 flexboxgrid 庫來創建簡單的響應式布局，我有一個這樣的父 div 孩子們有 flexboxgrid 樣式它工作得很好，除非我把'gap：2rem'放在父級上，然后div開始溢出並將最后一個項目推到另一行。為了說明問題：我該如何解決？編輯：鏈接到 CodePen，間隙有 2 ...

部分被阻塞（在頂部）其他部分

[英]Section is Blocking (on top) Other Section

我需要為這兩個部分做一個響應式設計，兩個部分完全在同一行顯示。這是台式機和平板電腦/移動設備的分辨率：我認為這是因為我使用的是 d-flex，但我仍然無法修復它。我正在執行 d-flex 以使這 8 張卡片中的圖標和文本位於同一行，但也垂直和水平居中。我需要刪除 d-flex 嗎？如果 ...

FlexBox：同一列上有 2 個元素，而 flex-direction 列

[英]FlexBox: 2 Elements on the same column while flex-direction column

我有一個包含 3 個元素的容器，它們的寬度共同為 100%（25%、50%、25%）。如果容器小於 800 像素，則應更改元素的順序。 #box2 的寬度為 100%。 #box1 和#box3 的寬度都應該是 50%，並且在同一列上。因此，作為最終結果，我應該有一列#box2 為 100% ...

當父級的寬度減小時，如何防止引導列折疊到新行？

[英]How to prevent bootstrap column from collapsing to new line when width of the parent is reduced?

我試圖通過使用“px-5”向表單的兩側添加填充來減少表單的寬度。但是當我這樣做時，包含“#lastName”輸入的列正在折疊成一個新行。有沒有一種方法可以減小“表單”的寬度，以便兩列（包含 ID 為#lastName 和#firstName 的輸入）的寬度隨表單寬度減小而不折疊到新行。 ...

我試圖在 1 行中顯示 3 列

[英]I am trying to display 3 columns in 1 row

在我的 shopify 部分中，我試圖顯示這樣的部分，我可以將其添加到我的主頁。問題是我使用帶有以下代碼的 shopify 液體模式。 logo-list.liquid 這是我制作的scss，我不明白為什么它不像上圖那樣顯示。這就是我得到的：我不知道為什么當我希望它顯示為一行時它顯示為一 ...

在 flex-container 中獲取 DIV 以正確對齊空間？

[英]Getting DIV in flex-container to align space properly?

這是我的頁面的代碼： body { font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 18px; } h1, h2, h3, h4, h5 { font-family: Helvetica, Aria ...

如何使用 CSS 在 Vue JS v-for 循環中添加換行符

[英]How to Add Line Break in Vue JS v-for loop with CSS

如果單擊列表項，我需要按字母順序顯示名稱。我為此使用了 Vue.js 和 Flex Grid。我有一個名為 ListAll 的列表項，單擊 ListAll 時，我必須顯示按 nameList 數組中的名稱分組的所有記錄。我在顯示分組名稱時遇到問題。我正在使用 Flex Grid 來顯示 ...

圖像大小未重新調整以適應 flexbox

[英]Image size not readjusting to fit within flexbox

我正在為我的圖像使用max-height ，但它仍然不適合該部分和超調。我為頂級div ( 90vh ) 指定了一個固定大小，在它下面，我使用特定相對高度的百分比。結構看起來像 nav component html是附件是大約。提琴手。我無法上傳圖片 - https://jsfidd ...

具有 7 列的 Flexbox 網格

[英]Flexbox grid with 7 columns

我正在創建一個帶有 tailwind 和 flexbox 的網格。是否可以創建 7 列網格？我知道我可以使用寬度百分比，但這里的最佳做法是什么？ ...

為什么我的 flexbox 沒有占據它所包含的容器的整個高度？

[英]Why does my flexbox does not occupy the entire height of the container it is enclosed in?

我正在做一門關於前端大師的課程。這是入門課程的第一個項目。我根據以下內容制作了網站： https : //btholt.github.io/intro-to-web-dev-v2/news.html 這是我的 HTML 代碼：這是我的 CSS 代碼：但是，您會看到在放大頁面時，in ...

Bootstrap - 具有響應寬度的自動大小列

[英]Bootstrap - automatic size columns with responsive width

我覺得這可能以前已經回答過，但是我已經搜索過，找不到任何接近的問題。我正在使用一個非常標准的引導行和列設置來設置菜單欄（flexbox）的樣式。此菜單由 php 中的 wordpress 生成，而不是在 html 中硬編碼。由於它是網站的一部分，因此菜單可能會隨着時間而改變：一次可能有 4 個 ...

使用 flexbox 堆疊列 - 移動屏幕上 2 列，大屏幕上 3 列

[英]Stack columns with flexbox - 2 columns on mobile screen, 3 columns on large screen

我正在嘗試將我的 flexbox 設計為在大屏幕上有 3 列，在移動屏幕上有 2 列（見下圖 1 和 2）。這是我的 JS Fiddle 和我的代碼： https://jsfiddle.net/kwxj83v6/6/ 它在大屏幕上工作正常，但無法讓它在小屏幕上正確呈現。 <div cla ...

為什么 mdbootstrap 列沒有占用整個頁面的響應寬度？

[英]Why is the mdbootstrap column not taking the full page responsive width?

我正在開發一個使用mdbootstrap的 react js 項目，我正在嘗試構建一個類似於此的組件第一張圖片是桌面的，另一張是移動用戶的所以，我試圖實現類似的東西，我開始使用引導類，但在我的反應項目中無法實現。但令我驚訝的是，這些列並沒有占據全寬。為什么會這樣，我該怎么辦？這是它在正常 ...

清晰設計網格

[英]Clarity Design Grid

當我在瀏覽器（例如 Firefox: iphone X）的響應式視圖中進行開發時，一切都非常適合，但是當我更改為 iphone X 瀏覽器（Safari 或 Chrome）時，內容位於瀏覽器底部菜單的后面，我需要滾動查看內容。網格是否不考慮視口大小減去瀏覽器底部菜單大小？有什么提示可以克服這 ...

使特定的 flexbox 響應

[英]Making specific flexbox responsive

對於即將到期的我的學校項目，我正在創建一個網站，其部分類似於此網站上的“我們的工作”和“跟隨”部分： https://bellafare.com/ 我在 flexbox 的幫助下重新創建了它們，它們看起來就像我希望它們在 15 英寸筆記本電腦屏幕和 iphone 6/7/8 上一樣。然而。在寬度 ...