未應用 CSS div 高度和寬度

Question

出於某種原因，我無法將高度和寬度應用於 div 元素。 我正在使用 TailwindCSS 和 Nextjs。

我的目標是創建幻燈片以垂直對齊滾動，但在瀏覽器中刪除了高度和寬度屬性。

請任何建議我絕望。

這是我的容器和其中每個視圖的 css：

 .snap-container { overflow-y: scroll; width: 100%; height: 100vh; display: flex; flex-flow: column nowrap; } .snap-view { height: 100vh; width: 100%; display: flex; }

Answer 1

如果你有

.snap-container {
    overflow-y: scroll;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-flow: column nowrap;
  }
  .snap-view {
    height: 100vh;
    width: 100%;
    display: flex;
  }

您的兩種樣式都將被應用，即使在圖片上您只顯示.snap/view

但高度和寬度屬性在瀏覽器中被刪除。

這是因為這些是代碼周圍的其他屬性，位於您發布的代碼之上，並且它們可能已被級聯覆蓋

如果您希望.h-screen和.w-full屬性無論如何都應用，您可以將它們直接放入元素中，或者嘗試將它們放入.snap-container和.snap-view下面的 CSS

試試看，希望我有所幫助