堆棧內存溢出
  簡體   English   中英

調整窗口大小時，GUI設計中斷

[英]GUI Design breaks when resizing the window

 原文  2010-08-11 07:11:18  2   1    javascript/ html/ css

問題描述

當我調整網頁窗口的大小時，它會中斷GUI設計，並且選項卡看起來很糟糕： 

<TABLE border="0" bordercolor="red" cellpadding="0" cellspacing="0" width="100%" id="homeContainer" >
---------------- here the rest of contents
</TABLE>

替代文字

1 個解決方案

解決方案1
 0 已采納  2010-08-11 07:33:06

您是否檢查過表格的其余寬度和CSS？

設置寬度<div>調整 window 的大小時</div><div id="text_translate"><p>所以我在 Vuejs 中得到了這個應用程序，它被css grid划分為 3 個 div 基本上：一個sidebar 、一個configpanel和一個preview 。 我想根據當前屏幕大小和屏幕大小調整時以px為單位設置preview div 的寬度</p><p>為了澄清起見，我制作了一個網站的 gif 圖像，它幾乎完全符合我的要求： <a href="https://gyazo.com/d667756474e7f4fa18e2d5d64a0dee5a" rel="nofollow noreferrer">https://gyazo.com/d667756474e7f4fa18e2d5d64a0dee5a</a></p><p> 正如您在 gif 中看到的，每次調整屏幕大小時，特定的&lt;div&gt;都會由於某種原因（不知道為什么或如何）被分配一個新的 class 並且 div 的width會自動更新為新的px值。</p><p> 起初我以為我可以在created()鈎子中做這樣的事情：</p><pre> window.addEventListener("resize", () =&gt; { let preview = window.document.querySelector(".preview"); preview.style.width = `${preview.offsetWidth}px`; });</pre><p> 但這不起作用。</p><p> 我在<a href="https://codesandbox.io/s/hopeful-feather-ywh6z?file=/src/components/Preview.vue:125-430" rel="nofollow noreferrer">這里</a>的codesandbox中設置了一個非常簡單的示例項目。</p><p> 理想情況下，我想知道如何像網站在 gif 中那樣動態設置像素width 。</p><p> 此外，出於好奇，我想知道每次調整屏幕大小時該特定網站為何以及如何生成新的 class （我已經看過幾次了，我想知道它是什么）。</p></div>

[英]Setting the width of a <div> when resizing the window

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 調整大小時Skrollr視差中斷 在調整窗口大小時更改CSS會破壞CSS 調整瀏覽器窗口大小時調整網格大小 調整窗口大小時移動圖層 調整瀏覽器大小 window 中斷 JavaScript 圖像縮放 function 調整窗口大小時更新窗口內部高度 調整窗口大小時無法禁用滾動功能 響應式JS-調整窗口大小時出現問題 調整 window 大小時，svelte/sapper 中出現 InvalidCharacterError 設置寬度<div>調整 window 的大小時</div><div id="text_translate"><p>所以我在 Vuejs 中得到了這個應用程序，它被css grid划分為 3 個 div 基本上：一個sidebar 、一個configpanel和一個preview 。 我想根據當前屏幕大小和屏幕大小調整時以px為單位設置preview div 的寬度</p><p>為了澄清起見，我制作了一個網站的 gif 圖像，它幾乎完全符合我的要求： <a href="https://gyazo.com/d667756474e7f4fa18e2d5d64a0dee5a" rel="nofollow noreferrer">https://gyazo.com/d667756474e7f4fa18e2d5d64a0dee5a</a></p><p> 正如您在 gif 中看到的，每次調整屏幕大小時，特定的&lt;div&gt;都會由於某種原因（不知道為什么或如何）被分配一個新的 class 並且 div 的width會自動更新為新的px值。</p><p> 起初我以為我可以在created()鈎子中做這樣的事情：</p><pre> window.addEventListener("resize", () =&gt; { let preview = window.document.querySelector(".preview"); preview.style.width = `${preview.offsetWidth}px`; });</pre><p> 但這不起作用。</p><p> 我在<a href="https://codesandbox.io/s/hopeful-feather-ywh6z?file=/src/components/Preview.vue:125-430" rel="nofollow noreferrer">這里</a>的codesandbox中設置了一個非常簡單的示例項目。</p><p> 理想情況下，我想知道如何像網站在 gif 中那樣動態設置像素width 。</p><p> 此外，出於好奇，我想知道每次調整屏幕大小時該特定網站為何以及如何生成新的 class （我已經看過幾次了，我想知道它是什么）。</p></div>
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM