问题描述
刚开始使用W3.css,但还没有找到解决这个小问题的解决方案,这个问题似乎只出现在移动版本上。
因此制成了一个响应式容器-行,其中有4个不同宽度的单元格。当我的手机处于纵向模式时,它将按预期加载网站。但是,当我将其变为横向时-仅此具有4个单元格的容器-跳回到“大/中”屏幕版本-单元格彼此并排排列,而不是垂直排列的(附上图片以使其清晰)。 / p>
Landscape mode - only this container uses different width
Back to portrait from landscape - same problem
对此有何建议?
<div class="w3-cell-row" style="width: 100%; background: #2D9595; padding-left: 3%; padding-right: 3%;">
<div class="w3-container w3-cell w3-mobile" style="padding: 3%">
</div>
<div class="w3-container w3-cell w3-mobile" style="padding: 3%">
</div>
<div class="w3-container w3-cell w3-mobile" style="padding: 3%">
</div>
<div class="w3-container w3-cell w3-mobile" style="padding: 3%">
</div>
</div>
谢谢
解决方法
经过测试,我的猜测是CSS display: table;
可能正在重新计算并调整旋转宽度。为了保持一致,请尝试对每个.w3-cell-row
应用百分比宽度,该宽度仅会影响600px及以下的像素。
.w3-cell-row {
width: 100%;
padding: 0 3%;
background: #2D9595;
}
.w3-cell-row .w3-container {
padding: 3%;
/* table-layout: fixed; */
}
.w3-cell-row .w3-container:nth-child(1) {
background-color: pink;
width: 30%;
}
.w3-cell-row .w3-container:nth-child(2) {
background-color: green;
width: 40%;
}
.w3-cell-row .w3-container:nth-child(3) {
background-color: blue;
width: 15%;
}
.w3-cell-row .w3-container:nth-child(4) {
background-color: orange;
width: 15%;
}
<div class="w3-cell-row">
<div class="w3-container w3-cell w3-mobile">
adipisicing elit. Rerum
</div>
<div class="w3-container w3-cell w3-mobile">
consectetur adipisicing
</div>
<div class="w3-container w3-cell w3-mobile">
Lorem ipsum dolor sit amet
</div>
<div class="w3-container w3-cell w3-mobile">
Eos,aut?
</div>
</div>
,
根据w3.css的文档:
响应式布局
w3-mobile类将移动优先响应性添加到任何HTML 元素。
与w3单元格一起使用将显示布局列 垂直在小屏幕/手机上,水平在 中/大屏幕。
所以这按预期工作。
另一方面,两种模式(纵向和横向)上都存在“不同的宽度”,并且该问题似乎已解决,它删除了类别为“ w3-cell-row”的div的填充(3%,左右)