最近,我一直在为移动浏览器更新我的网站,并遇到DIV居中和宽度问题。

本质上,我有一个由三个框(DIV)组成的嵌入式块,它们位于容器DIV中。三个方框中的每个方框都将其宽度调整为%,这在台式机浏览器上可以正常工作,但在移动设备上,方框被向下推到彼此下方,并保持其最小宽度不变(即在右侧创建了较大的空白空间)。

但是我想做的是让盒子在被按下时变得居中对齐,然后让它们每个都将其宽度扩展到容器的100%,以便使用所有可用的容器宽度。

<div style="width:50%;background-color:#dadada;padding:4px;border-radius:4px;overflow:hidden;">

    <div style="float:left;margin:auto;min-width:33%;">
        <div style="border: 1px solid #aeaefb;">
            <div style="width:95%;margin:auto;border: 3px solid #9a244f;">
                    Content goes into this box...
            </div>
        </div>
    </div>

    <div style="float:left;margin:auto;min-width:33%;">
        <div style="border: 1px solid #aeaefb;">
            <div style="width:95%;margin:auto;border: 3px solid #9a244f;">
                    Content goes into this box...
            </div>
        </div>
    </div>

    <div style="float:left;margin:auto;min-width:33%;">
        <div style="border: 1px solid #aeaefb;">
            <div style="width:95%;margin:auto;border: 3px solid #9a244f;">
                    Content goes into this box...
            </div>
        </div>
    </div>

</div>


现在,我可以使用Media Queries来解决此问题(已采用float:none并进行了一些手动调整等)或jQuery,但我感觉自己正在忽略可在移动和桌面浏览器中实现的简单CSS版本。有没有一种简单且尽可能向后兼容的方法?

最佳答案

尝试这个。

我从内部div移除了float:left,并使其显示为:inline-block。
还向容器添加了text-align:center。



<div style="width:50%;background-color:#dadada;padding:4px;border-radius:4px;overflow:hidden;text-align:center">

    <div style="display:inline-block;margin:auto;min-width:33%;">
        <div style="border: 1px solid #aeaefb;">
            <div style="width:95%;margin:auto;border: 3px solid #9a244f;">
                    Content goes into this box...
            </div>
        </div>
    </div>

    <div style="display:inline-block;margin:auto;min-width:33%;">
        <div style="border: 1px solid #aeaefb;">
            <div style="width:95%;margin:auto;border: 3px solid #9a244f;">
                    Content goes into this box...
            </div>
        </div>
    </div>

    <div style="display:inline-block;margin:auto;min-width:33%;">
        <div style="border: 1px solid #aeaefb;">
            <div style="width:95%;margin:auto;border: 3px solid #9a244f;">
                    Content goes into this box...
            </div>
        </div>
    </div>

</div>

10-07 19:37
查看更多