html - 如何使此 div 扩展到手机/平板电脑屏幕的 100%？

Question

为清楚起见而编辑

目前，我在桌面“kt_mobile_left”和“kt_mobile_right”上并排放置了 2 个 div——每个 div 占页面宽度的 47%。

我想要它，以便在移动设备和平板电脑上，左侧 div(“kt_mobile_left”)延伸到页面的 100% 并将“kt_mobile_right”推到其下方。现在它只占页面的 47%。我设置了一个媒体查询使宽度为 100%，但它似乎没有将它添加到 div。

我的媒体查询是否正确？

这是我的代码。

    <style type="text/css">

/*desktop css */

    .kt_mobile_left {
        width: 47%; display: inline-block; vertical-align: text-top; margin-right:25px; padding: 10px;

    } 

    .kt_mobile_right {

        width: 47%; display: inline-block;vertical-align: text-top; max-width: 457px;

    }




    /* #### Tablets or mobile css */
    @media screen and (max-device-width: 867px){

    .kt_mobile_left {
        width: 100% !important;
        min-width: 800px;
        display: block !important;
        margin-right: 0px;

    }

    .kt_mobile_right {
        width: 100% !important;
        float: none !important;
        display: block !important;
    }



    }

</style>


<div style="margin: 0 auto; text-align: center; margin-top: 25px; padding: 25px; width: 100%">
    <div class="kt_mobile_left">
    <p style="font-size: 40px; line-height: 45px; margin: 0 0 40px; position: relative; text-align: center; font-weight: 300; color: #000; text-align: left">Learn more about who may be calling or texting your teen</p>
    <p style="font-size: 15px; line-height: 150%; text-align: left">      TeenSafe has partnered with BeenVerified, a one-stop bakground check service, to help you learn more about the people who are calling or texting your child. Try it for just $1 for 5 days.  </p>
</div>

<div class="kt_mobile_right">
<img src="http://storage.googleapis.com/instapage-user-media/ce3c4430/5232032-0-BeenVerified.png">
</div>  
</div>

这是我的 JSfiddle:https://jsfiddle.net/kn4xrue5/

有人能帮忙吗？

Answer 1

你刚刚弄乱了代码。我已经清理了你的一些代码，媒体查询似乎工作正常。

.kt_mobile_left {
            background: red;
            width: 47%; display: inline-block; vertical-align: text-top; margin-right:25px; padding: 10px;

        }
        .kt_mobile_right {
            background: green;

            width: 47%; display: inline-block;vertical-align: text-top; max-width: 457px;

        }
        @media screen and (min-width: 320px) and (max-width: 1024px) {
            .kt_mobile_left {
                width: 100%;
            }
            .kt_mobile_right {
                width: 100%;
            }
        }

检查 fiddle

https://jsfiddle.net/mgautam1408/xjdcqvu3/