Question

因此，出于某种原因，我的网页在我的主屏幕上显示得很好，但它在我的第二台显示器上搞砸了。主屏幕分辨率：1440x900，第二屏幕分辨率：1280x800

编辑：我怎么做才能让sidecroll消失。

编辑：固定SIDESCROLL

截图：

主屏幕：

main screen

辅助屏幕：

secondary screen

html{        
}
body {width:90%;margin:auto;min-width:600px;max-width:2000px}     

#left, #right, #middle {
    position: fixed;
    width: 50%;
    height: 100%;
    top: 0
            margin-left:auto;
margin-right:auto;
}

#middle {
    background-color: red;
 right: 500px;
    left: 400px;
    width: 45%;
margin-left: auto;
    margin-right: auto;
}
#left {
    background-color: black;
    right: 880px;
    margin-left:auto;
margin-right:auto;
     width: 80%;
}
#right {
    background-color: black;
    left: 880px;
    margin-left:auto;
margin-right:auto;
     width: 80%;
}
#container {
    background: #fff;
    width: 80%;
    margin: 0 auto;
    position: relative
        margin-left:auto;
margin-right:auto;
     width: 80%;
    }

body {
   font-family: "Comic Sans MS";
} 

h4{
    font-size: 20pt;
}
em{
    font-weight: bold;
    color:darkslategrey;
}

em1{
    font-weight: bold;
    color:darkslategrey;
}

#mijngegevens {
    
    top: 50px;
        left: 420px;
        width: 700px;
        height: 400px;
        position: absolute;
    margin-left:auto;
margin-right:auto;
width:80%;
}

#joeyvideo  {
top: 350px;
    left: 420px;
    height: auto;
    position: absolute;
    
    border-style: double;
    border-width: thick;
    border-color: black;
    margin-left:auto;
margin-right:auto;      
}

#gmaps {
    top: 700px;
    left: 420px;
    position: absolute;
    margin-left:auto;
margin-right:auto;
    width: 80%;        
}

<!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    <title>Joey Salads</title>
    </head>
    
    <body>
        <div id="left"></div>
        <div id="right"></div>
        <div id="middle"></div>
        <div id="container"></div>
        <div id="mijngegevens">
        <h4>The best prankster on, youtube!</h4>
        <p><a href="https://www.youtube.com/user/JoeySalads"><b><u><i>Subscribe</i></u></b></a></p>
        <p><em>Name:</em>Sick prankster Afghanistan</p>
        <p><em1>Adress:</em1><a href="https://www.google.nl/maps/place/Peachy+In+The+Secret+Hideout/@1.3041018,103.8581836,17z/data=!4m12!1m6!3m5!1s0x31da19b6c17eb7d1:0x2d021381dbf79a7b!2sPeachy+In+The+Secret+Hideout!8m2!3d1.3040964!4d103.8603723!3m4!1s0x31da19b6c17eb7d1:0x2d021381dbf79a7b!8m2!3d1.3040964!4d103.8603723?hl=nl" </a> Secret hideout</p>
       
        </div>        
        
        <div id="gmaps">
        <iframe width="420" height="350" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyC8YwGwvlNWXGcf92JTE6ymhCMNHp5n4MI &q=Secret+Hide+Out+ng+Mga+Gadon,Angeles II, Valenzuela, National Capital Region, Philippines" allowfullscreen></iframe>
        </div>           
        
        <div id="joeyvideo"><iframe width="420" height="315" src="https://www.youtube.com/embed/CHt7EBCgJnI" frameborder="0" allowfullscreen></iframe></div>            
    </body>       

</body1>
</html>

编辑：图片2

Answer 1

您的问题是，您要告诉中间部分右侧有多少像素。除非使用您网站的每个人使用与主显示器相同的屏幕分辨率，否则您编码的方式将永远不会正确。

你应该做的是使用relative positioning，flexbox，或者最简单，最友好的浏览器就是使用像bootstrap这样的框架来帮助你摆弄你的方式想。

同样 - 删除水平滚动就像将overflow-x: hidden描述为正文上的css属性或导致侧滚动的其他内容一样简单

适应屏幕资源

1 个答案: