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的示例

＆＃13;

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. */
  }
}

＆＃13;

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

＆＃13;

您错过了width:100%并将top:100%添加到#homepageRightImg

在媒体查询中添加以下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 个答案: