W3.CSS-响应式布局-w3单元行

如何解决W3.CSS-响应式布局-w3单元行

刚开始使用W3.css，但还没有找到解决这个小问题的解决方案，这个问题似乎只出现在移动版本上。

因此制成了一个响应式容器-行，其中有4个不同宽度的单元格。当我的手机处于纵向模式时，它将按预期加载网站。但是，当我将其变为横向时-仅此具有4个单元格的容器-跳回到“大/中”屏幕版本-单元格彼此并排排列，而不是垂直排列的（附上图片以使其清晰）。 / p>

Portrait mode - works alright

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％，左右）