当浏览器变窄时，防止左div滑出浏览器

Question

I would like to it be responsive keep in mind. 我谨记要及时响应。 When dragging my browser from the right to the left. 从右向左拖动我的浏览器时。 The pic div would be pushed out of the browser. pic div将被推出浏览器。 Do I not have my content centered correctly? 我的内容没有正确居中吗？ I'm not sure If I have to use media queries or not.If so I have no knowledge of it. 我不确定是否必须使用媒体查询，如果知道，我对此一无所知。 So please be detailed for me. 因此，请为我详细说明。

CSS: CSS：

 body {
     background-color: #333435;
     padding: 0px;
     margin: 0px;
 }
 .container {
     height: 500px;
     width:800px;
     margin: -250px 0 0 -400px;
     position: absolute;
     left:50%;
     top:50%;
 }
 .time {
     text-align: center;
     width: 100%;
     margin: auto;
     margin-bottom: -20px;
     font-family:"Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
     font-style: italic;
     font-size: 100px;
     color:#d6d6d6;
     padding-top: 30px;
 }
 #date {
     text-align: center;
     width: 100%;
     margin: auto;
     font-family:"Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
     color:#d6d6d7;
 }
 #main {
     display: block;
     width: 100%;
     height: 346px;
     margin-top: 35px;
 }
 .logo {
     background-image: url('images/logo.png');
     background-repeat: no-repeat;
     float:left;
     width: 25%;
     height: 100%;
     display: block;
 }
 .portaltext {
     width:240px;
     height:34px;
     background-image: url('images/portal.png');
     float: left;
     clear: both;
     position: relative;
     top: 94px;
 }
 .divider {
     background-color:#008000;
     float:left;
     width: 25%;
     height: 100%;
 }
 #loginform {
     background-color:#A52A2A;
     float:left;
     width: 25%;
     height: 100%;
 }

HTML: HTML：

<!doctype html>
<html>
<head>
    <title>Portal</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
    <div class="container">
        <div class="time">12:22 PM</div>
        <div id="date">Friday, September, 12, 2014</div>
        <div id="main">
            <div class="logo">
                <div class="portaltext"></div>
            </div>
            <div class="divider"></div>
            <div id="loginform"></div>
        </div>
    </div>
</body>
</html>

Screenshot: 截图：

Answer 1

the thing i can understand from your question is that when you resize the browser the image pushed out of the screen if thats the problem it is happening because of negative margin you can solve it using media query 我可以从您的问题中了解到的是，当您调整浏览器的大小时，如果这是由于负余量而导致的问题，则可以将其推出屏幕，您可以使用媒体查询来解决它

@media screen and ( max-width:800px)
{
.container {

     margin:0px;
     left:0%;
 }
}

i think it will help otherwise sorry 我认为这会有所帮助，否则

当浏览器变窄时，防止左div滑出浏览器

问题描述

1 个解决方案

解决方案1
0 2014-09-13 06:00:44

当浏览器变窄时，防止左div滑出浏览器

问题描述

1 个解决方案

解决方案1 0 2014-09-13 06:00:44

解决方案1
0 2014-09-13 06:00:44