W3.CSS

Question

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

因此制作了一个响应式容器 - 行，其中有 4 个不同宽度的单元格。当我的 phone 处于纵向模式时，它正在按预期加载网站。但是当我把它变成横向时——只有这个有 4 个单元格的容器——跳回“large/medium”屏幕版本——单元格彼此相邻排列而不是垂直......（附上图片以使其清晰） .

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>

谢谢

Answer 1

测试后，我的猜测是 CSS display: table; 可能会在旋转时重新计算和调整宽度。为了保持一致，请尝试对每个 .w3-cell-row 应用百分比宽度，这只会影响 600 像素及以下的宽度。

.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>

Answer 2

根据 w3.css 的文档：

Responsive Layout

The w3-mobile class adds mobile first responsiveness to any HTML element.

Used together with w3-cell it will display the layout columns vertically on small screens/mobile phones and horizontally on medium/large screens.

所以这按预期工作。

另一方面，“不同宽度”在两种模式（纵向和横向）上都存在，问题似乎已解决，删除 div 的填充（3%，左和右）与 class "w3-cell-row".

W3.CSS - 响应式布局 - w3-cell-row

W3.CSS - Responsive Layout - w3-cell-row

html

css