Question

我目前正在为横向iPhone 6开发媒体查询css。我已经设置了一个父div，其中包含许多子元素，但并非所有子元素都显示，即使它们都存在于html中。

这是html

<!-- Mobile Content Area -->
<!-- Image Grid -->
<div id="mobile_image_grid_landscape">
    <img src="images/site/spaces_thumbnail.jpg" style="padding-right: 1%" />
    <img src="images/site/foreign_views_thumbnail.jpg" style="padding-left: 1%" />
    <div class="project_title_work_mobile">Title 1</div>
    <div class="project_title_work_mobile">Title 2</div>

    <img src="images/site/white_trails_thumbnail.jpg" style="padding-right: 1%" />
    <img src="images/site/form_thumbnail.jpg" style="padding-left: 1%" />
    <div class="project_title_work_mobile">Title 3</div>
    <div class="project_title_work_mobile">Title 4</div>

    <img src="images/site/mind_and_body_thumbnail.jpg" style="padding-right: 1%" />
    <img src="images/site/moving_image_thumbnail.gif" style="padding-left: 1%" />
    <div class="project_title_work_mobile">Title 5</div>
    <div class="project_title_work_mobile">Title 6</div>

    <img src="images/site/xx_thumbnail.gif" style="padding-right: 1%" />
    <img src="images/site/foreign_views_thumbnail.jpg" style="padding-left: 1%" />
    <div class="project_title_work_mobile">Title 7</div>
    <div class="project_title_work_mobile">Title 8</div>
</div>
<!-- Image Grid -->
<!-- Mobile Content Area -->

CSS：

/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
    #mobile_image_grid_landscape {
        visibility: visible;
        display: block;
        position: absolute;
        top: 11%;
        left: 18.125%;
        width: 63.75%;
        height: 100%;
    }
    #mobile_image_grid_landscape img {
        position: relative;
        width: 49%;
        display: inline-block;
    }
    .project_title_work_mobile {
        position: relative;
        display: inline-block;
        width: 50%;
        text-decoration: none;
    }
}

任何建议都会很棒，三江源

当iphone是风景时，子元素不显示

0 个答案: