最近,我一直在为移动浏览器更新我的网站,并遇到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>