繁体   English   中英

div宽度没有调整大小

[英]div width not resizing

我有一个div调整大小的问题。

我创建了这个DEMO 在这个演示中你可以看到有七个div,我正在使用砌体网格布局。

所以请调整页面宽度,你会看到有转换位置div。 问题出在这里。 当我使用我的localhost中的CSS和Javascript代码时,div不会改变位置。 谁能告诉我这里有什么问题? 在此输入图像描述在此输入图像描述 CSS

.kesif-wrp {
padding: 53px 0 0;
width: 100%;
position: relative;
}
.kesif-alani {
padding: 20px 0 50px;
margin: 36px auto 0;
position: relative;
max-width: 1620px;
min-width: 960px;
}
.kesif-gonderiler {
color: #444;
}
.kesif-gonderi-alani{
  width:300px;
  background-color:#ffffff;
  border-radius:3px;
  -webkit-border-radius:3px;
  -o-border-radius:3px;
  -moz-border-radius:3px;
  margin:10px;
}
.posts-holder {
  position:relative;
margin: 10px auto;
}

DEMO

删除这个:

min-width: 960px;

来自.kesif-alani课程

您可以使用它来决定如何调整它的大小。

    @media screen and (max-width: 1000px){
    // Use this as you would use a normal 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.

相关问题 动态调整div宽度 根据高度和宽度调整div的大小 使用HTML调整div宽度的大小 设置宽度<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> 文本大小自动调整 div 宽度 div调整大小后如何检测html div的宽度和高度 通过使用角度5调整div的高度和宽度的百分比而不是像素 右div的边距在调整大小时应与左textarea宽度匹配 JavaScript或jQuery-根据div的高度/宽度调整表格大小 div元素达到特定宽度时如何停止调整大小?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM