Question

为清晰而编辑

目前我在DESKTOP＆＃34; kt_mobile_left＆＃34;上有两个div并排。和＆＃34; kt_mobile_right＆＃34; - 每个div占页面宽度的47％。

我想要它，以便在移动和平板电脑上，左侧div（＆＃34; kt_mobile_left＆＃34;）延伸到页面的100％并推送＆＃34; kt_mobile_right＆＃34;在它下面。现在它只占页面的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-right上你有一个最大宽度。您需要通过执行max-width来清除媒体查询中的内容：auto，否则它不会达到100％。然后只是让两个容器重叠，你可以添加位置：绝对;到媒体查询中的类。

另一个建议是通过在媒体查询中向该类添加display：none来隐藏将在底部的那个。

Answer 2

My solution使用bootstrap。

<div class="col-xs-12">
  <div class="row">
    <div class="col-xs-12 col-sm-6">
      <h1 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</h1>
      <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="col-xs-12 col-sm-6">
      <img src="http://storage.googleapis.com/instapage-user-media/ce3c4430/5232032-0-BeenVerified.png">
    </div>  
  </div>
</div>

使用Bootstrap有其优点和缺点，但它是一个非常流行的框架。此解决方案不使用您提供的任何CSS，因为它使用Bootstrap的类。我确实提取了你内联的CSS，因为它通常不是最佳做法。

如果您对代码有疑问或想要调整，请告诉我。

Answer 3

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

.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%;
            }
        }

查看小提琴

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

如何将此div扩展到移动设备/平板电脑的100％屏幕？

3 个答案: