javascript - HTML+CSS奇怪的DIV错误-6ren

javascript - HTML+CSS奇怪的DIV错误

转载作者：行者123 更新时间：2023-11-28 16:01:50

25

4

我对 HTML 比较陌生，在让两个 div 对齐时遇到了一些小问题。第一个 div 是顶部框，第二个 div 是它下面的视频框。两者的宽度尺寸相同，但高度不同。每当我将视频框 div 放在顶部框 div 内时，视频框 div 都会无缘无故地向右移动 5px。我可以通过使用边距来修复它，但我整天都在谷歌搜索，无法找出它发生的原因。这是我的 HTML 代码和 CSS 代码。

.smoothbox
    {
        background-color: darkseagreen;
        border-style: solid;
        border-width: 5px;
        border-radius: 10px;
        border-color: black;
    }
    
    #topbox
    {
        width: 800px;
        height: 200px;
        margin-left: auto;
        margin-right: auto;
    }
    
    #video
    {
        width: 800px;
        height: 600px;
        margin-top: 200px;
    }

    <html>
        <head>
            <title>Camagru</title>
            <link rel="stylesheet" href="main.css">
        </head>
        <body>
            <div id="topbox" class="smoothbox">
                <video id="video" class="smoothbox" autoplay></video>
                <button id="snap">Snap Photo</button>
                <canvas id="canvas" width="800" height="600"></canvas>
                <script>
                    //Stream Video
                    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
                    {
                        navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) {
                        video.src = window.URL.createObjectURL(stream);
                        video.play();
                        });
                    }
                    //Snap Photo
                    var canvas = document.getElementById('canvas');
                    var context = canvas.getContext('2d');
                    var video = document.getElementById('video');
                
                    document.getElementById("snap").addEventListener("click", function() {context.drawImage(video, 0, 0, 800, 600);});
                </script>
            </div>
        </body>
    </html>

非常感谢所有帮助!

最佳答案

问题是你在 .smoothbox 上有一个 border 的 5px 所以 topbox 和 video 获得 5px 的边框

所以这就是为什么 video 的绿色区域从左边移动 5px 因为你在 video 容器的左边(顶部底部和右边)添加了 5px

如果不设置 box-sizing:border-box ，两个 div 的宽度都将超过 800px，并且宽度为 810px。

请参阅下面的 box-sizing: border-box; 示例，以更清楚地了解发生了什么

.smoothbox
{
    background-color: darkseagreen;
    border-style: solid;
    border-width: 5px;
    border-radius: 10px;
    border-color: black;

}

#topbox
{
    width: 800px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
}

#video
{
    width: 800px;
    height: 600px;
    margin-top: 200px;
      box-sizing:border-box;
    margin-left: auto;
    margin-right: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="topbox" class="smoothbox">
            <video id="video" class="smoothbox" autoplay></video>
            <button id="snap">Snap Photo</button>
            <canvas id="canvas" width="800" height="600"></canvas>
            <script>
                //Stream Video
                if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
                {
                    navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) {
                    video.src = window.URL.createObjectURL(stream);
                    video.play();
                    });
                }
                //Snap Photo
                var canvas = document.getElementById('canvas');
                var context = canvas.getContext('2d');
                var video = document.getElementById('video');

                document.getElementById("snap").addEventListener("click", function() {context.drawImage(video, 0, 0, 800, 600);});
            </script>
        </div>

您可以使用负边距(margin-left:-5px)，这样两个 div 就会对齐。看片断

.smoothbox
{
    background-color: darkseagreen;
    border-style: solid;
    border-width: 5px;
    border-radius: 10px;
    border-color: black;
}

#topbox
{
    width: 800px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
}

#video
{
    width: 800px;
    height: 600px;
    margin-top: 200px;
    margin-left: -5px;
    margin-right: auto;
}

<div id="topbox" class="smoothbox">
            <video id="video" class="smoothbox" autoplay></video>
            <button id="snap">Snap Photo</button>
            <canvas id="canvas" width="800" height="600"></canvas>
            <script>
                //Stream Video
                if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
                {
                    navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) {
                    video.src = window.URL.createObjectURL(stream);
                    video.play();
                    });
                }
                //Snap Photo
                var canvas = document.getElementById('canvas');
                var context = canvas.getContext('2d');
                var video = document.getElementById('video');

                document.getElementById("snap").addEventListener("click", function() {context.drawImage(video, 0, 0, 800, 600);});
            </script>
        </div>

但是我建议您更改 html 结构并使它们成为 sibling 。

并使用 box-sizing:border-box 如果你添加 border 因为如果没有，而不是占用 800px; 带有 border:5px 将占用 810px 而不是

关于javascript - HTML+CSS奇怪的DIV错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39961286/

25

4

0

文章推荐： css - 两个媒体查询之间的区别

文章推荐： javascript - 灯箱不起作用，尽管加载了 jquery

文章推荐： html - Div float 左侧高度 100%

文章推荐： javascript - 不那么隐藏的表单域

javascript - 谷歌地图自动完成弹回已经清除的文本......奇怪......奇怪......奇怪
我有这种来自 Google map 自动完成的奇怪行为(或者我可能错过了某事)...想法？奇怪的: 您在输入中输入某物，例如“伦敦” 您按 [ENTER] 你按下 [CLEAR] 按钮你点击进入'输
Java意外类型做字符串比较，奇怪
这段代码与《Learning Java》(Oracle Press Books)一书中的代码完全一样，但它不起作用。我不明白为什么它不起作用，它应该起作用。我用 OpenJDK 和 Sun JDK 7
Powershell 对新行使用反引号 - 奇怪
示例 1 中究竟发生了什么？这是如何解析的？ # doesnt split on , [String]::Join(",",("aaaaa,aaaaa,aaaaa,aaaaa,aaaaa,aa
iphone - 指针类型不兼容？？奇怪
我需要获得方程式系统的解决方案。为此，我使用函数sgesv_()。一切都很好，它使我感到解决方案的正确结果。但是我得到一个奇怪的警告。警告:从不兼容的指针类型传递'sgesv_'的参数3 我正在
ios - 奇怪!动画完成后是否一直调用函数？
我目前在制作动画时遇到一个奇怪的问题: [UIView animateWithDuration:3 delay:0
jQuery 不工作 - 奇怪
alert('works'); $(window).load(function () { alert('does not work'); });
java - 静态内部类 - 奇怪
我的代码: public class MyTest { public class StringSorter implements Comparator { public
JavaScript 对象更新行为(奇怪？)
我正在学习 JavaScript。尝试理解代码， function foo (){ var a = b = {name: 'Hai'}; document.write(a.name +''
c++ - GetLastError() != 奇怪
这个问题不太可能帮助任何 future 的访问者；它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况有关，这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用，visit
Linux 环境 -i 奇怪
这按预期工作: [dgorur@ted ~]$ env -i env [dgorur@ted ~]$ 这样做: [dgorur@ted ~]$ env -i which date which: no
c++ - 指针增量 - 奇怪
struct BLA { int size_; int size()const{ return size_; } } int x; BLA b[ 2 ]; BLA * p = &b[
css - 图像垂直对齐与 css - 奇怪
我有以下代码: #test img {vertical-align: middle;} div#test { border: 1px solid green; height: 150px; li
gcc - (奇怪？)GCC 预处理器行为
我想大多数使用过 C/C++ 的人都对预处理器的工作原理有一定的直觉(或多或少)。直到今天我也是这么认为的，但事实证明我的直觉是错误的。故事是这样的: 今天我尝试了一些东西，但我无法解释结果。首先考虑
OCMock只生效一次，奇怪，为什么？或者我这边有什么问题？
我想为 TnSettings 做 mock，是的，如果通过以下方法编写代码，它就可以工作，问题是我们需要为每个案例编写 mock 代码，如果我们只 mock 一次然后执行多个案例，那么第二个将报告异常
c - 溢出？找不到来源，奇怪
我的项目中有以下两个结构 typedef volatile struct { unsigned char rx_buf[MAX_UART_BUF]; //Input buffer over U
c# - 奇怪，regex.split方法匹配一个null元素
Regex rx = new Regex(@"[+-]"); string[] substrings = rx.Split(expression); expression = "-9a3dcb
java - JDBC 连接被对等方关闭(奇怪)
我的两个应用程序遇到了一个奇怪的问题。这是设置: 两个 tomcat/java 应用程序，在同一个网络中运行，连接到相同的 MS-SQL-Server。一个应用程序，恰好按顺序位于 DMZ 中可从互联
Android OnLongClickListener 奇怪/不可靠的行为
我目前正在与 Android Api Lvl 8 上的 OnLongClickListener 作斗争。拿这段代码: this.webView.setOnLongClickListener(new
java - JUnit 奇怪 - 我未指定预期数量
这个问题不太可能帮助任何 future 的访问者；它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况相关，这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用，visit
objective-c - performSelectorOnMainThread 奇怪
只是遇到了奇怪的事情。我有以下代码: -(void)ImageDownloadCompleat { [self performSelectorOnMainThread:@selector(up

首页

博学

6Ren·AI

商城

javascript - HTML+CSS奇怪的DIV错误