使div在特定屏幕尺寸下響應

Question

我希望在不同的屏幕尺寸下（例如在480px寬度處）並降低#homepageRightImg在#homepageLeftImg下。 這是我正在使用的代碼，但是似乎沒有用。 我想念什么或做錯什么？

HTML

        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />    
<link href="assets/css/style.css" rel="stylesheet" type="text/css" />
</head>
<!--[if IE 8]><body class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><body> <!--<![endif]-->

<div id="homepageContentGlobal" class="homepageContentGlobal" style="display:none"></div>
<div></div>

        <div id="homepageLeftNav" class="homePageNav">
            <div class="content" id="homepageLeftMenuTitle">
                <p class="title">My<br>Test</p>
                <div class="subTitle">
                      <a href="http://www.google.com/" class="button">Learn more</a>
                </div>
            </div>
            <div id="homepageLeftTitle" class="homepageTitle">

            </div>
        </div>


        <div id="homepageRightNav" class="homePageNav">
           <div class="content" id="homepageRightMenuTitle">
                <p class="title">My<br>Title</p>
                <div class="subTitle">
 <a href="http://www.google.com/" class="button">Learn more</a>
                </div>
            </div>
            <div id="homepageRightTitle" class="homepageTitle">


            </div>
        </div>
<div>
        <ul id="homepageLeftImg" class="homepageCol">
<li><img src="test.jpg"></li>
<li><img src="test.jpg"></li>
<li><img src="test.jpg"></li>
<li><img src="test.jpg"></li>
<li><img src="test.jpg"/></li>
       </ul>


<ul id="homepageRightImg" class="homepageCol">
<li><img src="test.jpg"></li>
<li><img src="test.jpg"></li>
<li><img src="test.jpg"></li>
<li><img src="test.jpg"></li>
<li><img src="test.jpg"/></li>       </ul>
    </div>
</body>
</html>

CSS

     .homepageContentGlobal {
        position: fixed;
        z-index: 98;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
     }
    .homepageCol li {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        display: block;
     }

     #homepageLeftImg {
        position: absolute;
        top:0;
        left: 0;
        bottom: 0;
        right: 50%;
        width: 50%;
        height: 100%;
    z-index: 0;
        overflow: hidden;
     }

     #homepageRightImg {
        position: absolute;
        top:0;
        right: 0;
        left: 50%;
        width: 50%;
        height: 100%;
        overflow: hidden;
    }

     #homepageLeftNav {
        position: absolute;
        left: 0;
        right: 50%;
        width: 50%;
        z-index: 3;
        cursor: pointer;
    height: 100%;
    }

   #homepageRightNav {
        position: absolute;
        right: 0;
        left: 50%;
        width: 50%;
        z-index: 3;
        cursor: pointer;
    height: 100%;
   }

.homepageTitle {
        cursor: default;
        width: 100%;
        margin: 0 auto;
        text-align: center;
    position: absolute;
    height: 100%;
    top: 100%;
     }
   .homepageNavLink{}

    #homepageLeftMessage {
    z-index: 100;
    height: 100px;
    width: 100px;
     }

     #homepageLeftMessage #subLogo {
    z-index: 100;
    }

    @media only screen and (max-width : 480px) {
     #homepageLeftImg {
    display:block;
     }

   #homepageRightImg {
    display:block;
    }
}

Answer 1

添加了一個示例，說明如何使用除position elements.以外的css position elements.

 body, html { margin: 0px; padding: 0px; height: 100%; } ul { margin: 0px; padding: 0px; } li { list-style: none; margin: 0px; padding: 0px; } #homepageLeftImg, #homepageRightImg { float: left; /* Keeps both the div to align side by side to each other */ width: 50%; /* 50% width to both equates to 100% */ height: 100%; } #homepageLeftImg li, #homepageRightImg li { width: 100%; height: 100%; float: left; } #homepageLeftImg li img, #homepageRightImg li img { width: 100%; height: 100%; } @media (max-width:480px) { #homepageLeftImg, #homepageRightImg { width: 100%; /* Below 480px the width will be 100% and the images will come in stakced view. */ } }

 <ul id="homepageLeftImg" class="homepageCol"> <li><img src="https://dummyimage.com/400x800/red/fff&text=This+is+Dummy+left+Image"></li> </ul> <ul id="homepageRightImg" class="homepageCol"> <li><img src="https://dummyimage.com/400x800/blue/fff&text=This+is+Dummy+right+Image"></li> </ul>

您缺少width:100%並且還向#homepageRightImg添加top:100%

在媒體查詢中添加以下CSS：

@media only screen and (max-width : 480px) {
     #homepageLeftImg {
    display:block;
width:100%;
     }

   #homepageRightImg {
    display:block;
width:100%; top:100%:
    }
}

還看到您的CSS代碼，我看到了很多poisition:absolute元素。 我建議不要在每個元素上使用position：absolute ，因為它會破壞結構。

使div在特定屏幕尺寸下響應

問題描述

1 個解決方案

解決方案1
0 已采納 2017-03-31 09:31:03

使div在特定屏幕尺寸下響應

問題描述

1 個解決方案

解決方案1 0 已采納 2017-03-31 09:31:03

解決方案1
0 已采納 2017-03-31 09:31:03