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

【问题标题】：W3.CSS - Responsive Layout - w3-cell-rowW3.CSS - 响应式布局 - w3-cell-row
【发布时间】：2021-01-02 19:57:44
【问题描述】：

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

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

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>

谢谢

【问题讨论】：

你是说第一次纵向加载没问题，旋转它会切换横向布局，但旋转回纵向会破坏布局？
是的，没错！
我猜你的问题出在上层容器上，而不是这个级别。更多代码会对我们有所帮助。

标签： html css w3.css

【解决方案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>

【讨论】：

你是在不修改的情况下测试原始代码吗？它有什么问题？
是的，我测试了它，它工作正常，你可以在这里查看其余代码：www.tfportal.hu/asd/index.html
Bjorn B. 谢谢我会检查一下，希望对我也有用！

【解决方案2】：

根据 w3.css 的文档：

响应式布局

w3-mobile 类为任何 HTML 添加了移动优先响应能力元素。

与 w3-cell 一起使用将显示布局列垂直在小屏幕/手机上和水平上中/大屏幕。

所以这按预期工作。

另一方面，“不同的宽度”适用于两种模式（纵向和横向），并且问题似乎已解决，删除了“w3-cell-row”类的 div 的填充（3%，左右） .

【讨论】：