簡體   English   中英

當瀏覽器變窄時,防止左div滑出瀏覽器

[英]Prevent left div from sliding out of the browser when the browser is narrower

我謹記要及時響應。 從右向左拖動我的瀏覽器時。 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>

截圖:

圖片

我可以從您的問題中了解到的是,當您調整瀏覽器的大小時,如果這是由於負余量而導致的問題,則可以將其推出屏幕,您可以使用媒體查詢來解決它

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

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

我認為這會有所幫助,否則

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM