Question

我正在制作一个有2列的div。一个宽度为66％，边距为宽度为33％，宽度为33％。

在每一列中，我有另一个div，它还有一个边框，也包含文本和段落。

当屏幕达到480px的宽度时，我有一组媒体查询，这两个列将成为100％宽度的块。

这在我的网络浏览器上运行良好。但我不能为我的生活弄清楚为什么它在我的手机和平板电脑上的工作方式不一样（如果重要的话，可以使用iphone和andriod平板电脑）。

以下是代码的外观：

HTML：

<div class="container"> 
    <div class="twothird" style="vertical-align: top;">
        <div class="border">
            <p class="box-title box-padding">some title</p>
            <p class="box-padding">some text</p>
        </div>
    </div>

    <div class="onethird">
        <div class="border" style="vertical-align: top;">
            <p class="box-padding">more text</p>
            <p class="box-padding">more text</p>
            <p class="box-padding">more text</p>
            <p class="box-padding">more text</p>
        </div>
    </div>
</div>

CSS：

<style> 
.container {
width: 100%;
}

.twothird {
display: inline-block;
width:  64%;
margin: 20px 1%;
}

.onethird {
display: inline-block;
width: 31%;
margin: 20px 1%;
}

.border {
border: 5px solid #000;
border-radius: 10px;
}

.box-title {
font-weight: bold;
}

.box-padding {
padding: 10px;
}

@media (max-width: 480px) {
    .twothird {
         display: inline-block;
         width:  100%;
    }

    .onethird {
         display: inline-block;
        width: 100%;
    }

     .border {
        border: 5px solid #000;
        border-radius: 10px;
    }
}
</style>

感谢任何帮助！

我的div拒绝对移动设备做出回应

0 个答案: