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 个答案: