个人中心
gpt4 book ai didi

javascript - div 容器的宽度不同于 100%

转载 作者：太空宇宙 更新时间：2023-11-04 02:58:19 24 4
gpt4 key购买 nike

我有一个显示 3D 图形的简单 WebGL 代码。它运行良好，但我想设置一个不同于 100% 的宽度值；即我想将 webGL 动画放在一个小盒子里。

在我的代码下面；我试图将 WebGL 放入一个带有 CSS“高度”和“宽度”的 500px 框中，但它不起作用:动画仍然占用 100% 的宽度:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - trackball controls</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
body {
    color: #000;
    font-family:Monospace;
    font-size:13px;
    text-align:center;
    font-weight: bold;

    background-color: #fff;
    margin: 0px;
    overflow: hidden;
}

.container {
    width: 500px;
    height: 500px;
}

        </style>
    </head>

    <body>
        <center><div id="container"></div></center>
        <script src="three.js/build/three.min.js"></script>

        <script src="three.js/examples/js/controls/TrackballControls.js"></script>

        <script src="three.js/examples/js/Detector.js"></script>
        <script src="three.js/examples/js/libs/stats.min.js"></script>

        <script>

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

var container, stats;

var camera, controls, scene, renderer;

var cross;

init();
animate();

function init() {
...
}

function onWindowResize() {
...
}

function animate() {

    requestAnimationFrame( animate );
    controls.update();

    // For displaying
    render();

}

function render() {

    renderer.render( scene, camera );
    stats.update();

}
        </script>
    </body>
</html>

如何规避这个问题？

谢谢

更新 1:

好的，对于类 ID 的混淆，我们深表歉意。

关于 div 容器，我在 WebGL 代码中使用 appenChild 来添加一个 renderer domElement。

使用以下代码:

<html lang="en">
    <head>
        <title>three.js webgl - trackball controls</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
body {
    color: #000;
    font-family:Monospace;
    font-size:13px;
    text-align:center;
    font-weight: bold;

    background-color: #fff;
    margin: 0px;
    overflow: hidden;               
}

#container {
    width: 300px;
    height: 300px;
    margin-left: auto;
    margin-right: auto;

}

        </style>
    </head>

    <body>
        <div id="container"></div>
        <script src="three.js/build/three.min.js"></script>

        <script src="three.js/examples/js/controls/TrackballControls.js"></script>

        <script src="three.js/examples/js/Detector.js"></script>
        <script src="three.js/examples/js/libs/stats.min.js"></script>

        <script>

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

...

</script>
</body>
</html>

我没有得到带有 WebGL 动画的居中框。 WebGL 窗口像这样向右移动(宽度设置为 300 像素)，但它不像我希望的那样居中。

enter image description here

PS:margin-left:auto 和 margin-right:auto 似乎不适用于居中。

谢谢。

最佳答案

您的 html 存在多个问题。

  1. 你的容器在你的 css 中定义为一个类，你在你的 html 中将它作为一个 id

  2. div 容器中没有任何内容

  3. <center></center>已弃用使用 margin-left:auto; margin:right:auto;在你的CSS中。

再试一次，看看你的表现如何

关于javascript - div 容器的宽度不同于 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31757730/

24 4 0
文章推荐： python - copy2权限错误: [WinError 32] The process cannot access the file because it is being used by another process:
文章推荐： javascript - 无法理解nodejs代码
文章推荐： javascript - 如何使对象引用在 Node 模块中可用？
文章推荐： python - 如何在 PyQt5 中画一条从鼠标到一个点的线？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com