मैं एचटीएमएल के लिए अपेक्षाकृत नया हूं, और मुझे दो divs को लाइन अप करने के साथ मामूली समस्याएं आ रही हैं। पहला डिव टॉप बॉक्स है, और दूसरा डिव इसके नीचे वीडियो बॉक्स है। चौड़ाई में दोनों समान आयाम हैं, लेकिन उनकी ऊंचाई अलग है। जब भी मैं वीडियो बॉक्स डिव को टॉप बॉक्स डिव के अंदर रखता हूं, तो वीडियो बॉक्स डिव को बिना किसी स्पष्ट कारण के 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>

सभी मदद की बहुत सराहना की जाती है!

1
NodziGames 10 अक्टूबर 2016, 18:04

3 जवाब

सबसे बढ़िया उत्तर

समस्या यह है कि आपके पास 5px का .smoothbox का border है, इसलिए topbox और video दोनों को 5px का बॉर्डर मिलता है

इसलिए video का हरा क्षेत्र बाएं से 5px खिसकता है क्योंकि आप video कंटेनर के बाएं (ऊपरी नीचे और दाएं) में 5px जोड़ते हैं

box-sizing:border-box सेट किए बिना, दोनों डिव अपनी चौड़ाई 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 ) का उपयोग कर सकते हैं और इसलिए दो divs को संरेखित किया जाएगा। स्निपेट देखें

.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 संरचना को बदल दें और उन्हें भाई-बहन बना दें।

और यदि आप border जोड़ते हैं तो box-sizing:border-box का उपयोग करें क्योंकि यदि नहीं, तो 800px; पर कब्जा करने के बजाय border:5px के साथ div 810px पर कब्जा कर लेगा

1
Mihai T 10 अक्टूबर 2016, 18:26

ऐसा लगता है कि यह संभव है कि, चूंकि आप वीडियो को #topbox div के अंदर नेस्ट कर रहे हैं, वीडियो पर मार्जिन-बाएं या पैडिंग-बाएं हो सकता है #टॉपबॉक्स डिव। उन दोनों मानों को शून्य पर सेट करने पर विचार करें और देखें कि क्या होता है।

0
Parker 10 अक्टूबर 2016, 18:13

'डिव' स्वचालित रूप से सीमा लेता है क्योंकि आप border-width: 5px; देते हैं।

0
Hemel 10 अक्टूबर 2016, 18:17