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

Question

我谨记要及时响应。 从右向左拖动我的浏览器时。 pic div将被推出浏览器。 我的内容没有正确居中吗？ 我不确定是否必须使用媒体查询，如果知道，我对此一无所知。 因此，请为我详细说明。

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：

<!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>

截图：

Answer 1

我可以从您的问题中了解到的是，当您调整浏览器的大小时，如果这是由于负余量而导致的问题，则可以将其推出屏幕，您可以使用媒体查询来解决它

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

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

我认为这会有所帮助，否则

当浏览器变窄时，防止左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