如何将三列布局转换为移动设备的单个无序列表？

Question

我正在开发一个响应式网页，该网页目前有 3 个 div，其中包含更多 div。这些在屏幕上显示为 3 个浮动列

但是当屏幕尺寸为 700px 及以下时，我希望 html 更改为无序列表，而不是 3 个浮动列

我知道您可以将 CSS 更改为响应式，但是可以更改 html 吗？（或者有没有更好的方法达到预期的效果？）

<section id="links">
  <div id="links_1">
    <div>
      <h3>Header 1</h3>
      <p>Text example 1</p>
    </div>
    <div>
      <h3>Header 2</h3>
      <p>Text example 2</p>
    </div>
    <div>
      <h3>Header 3</h3>
      <p>Text example 3</p>
    </div>
    <div>
      <h3>Header 4</h3>
      <p>Text example 4</p>
    </div>
    <div>
      <h3>Header 5</h3>
      <p>Text example 5</p>
    </div>
    <div>
      <h3>Header 6</h3>
      <p>Text example 6</p>
    </div>
  </div>
  <div id="links_2">
    <div>
      <h3>Header 7</h3>
      <p>Text example 7</p>
    </div>
    <div>
      <h3>Header 8</h3>
      <p>Text example 8</p>
    </div>
    <div>
      <h3>Header 9</h3>
      <p>Text example 9</p>
    </div>
    <div>
      <h3>Header 10</h3>
      <p>Text example 10</p>
    </div>
    <div>
      <h3>Header 11</h3>
      <p>Text example 11</p>
    </div>
    <div>
      <h3>Header 12</h3>
      <p>Text example 12</p>
    </div>
  </div>
  <div id="links_3">
    <div>
      <h3>Header 13</h3>
      <p>Text example 13</p>
    </div>
    <div>
      <h3>Header 14</h3>
      <p>Text example 14</p>
    </div>
    <div>
      <h3>Header 15</h3>
      <p>Text example 15</p>
    </div>
    <div>
      <h3>Header 16</h3>
      <p>Text example 16</p>
    </div>
  </div>
</section>

Answer 1

通过 jquery 您可以将 window 调整大小事件处理为：

$( window ).resize(function() {
  //
});

您可以获取元素并在函数内重新排序或更改它们，css 不允许您更改 html，但如果您想通过 CSS 进行更改，read this article关于css浮动

Answer 2

即使使用 html5，您也可以通过添加样式礼节并使用百分比进行响应式调整来使其响应式

<section id="links" style="width:50%;height:50%">
  <div id="links_1">
    <div>
      <h3>Header 1</h3>
      <p>Text example 1</p>
    </div>
    <div>
      <h3>Header 2</h3>
      <p>Text example 2</p>
    </div>
    <div>
      <h3>Header 3</h3>
      <p>Text example 3</p>
    </div>
    <div>
      <h3>Header 4</h3>
      <p>Text example 4</p>
    </div>
    <div>
      <h3>Header 5</h3>
      <p>Text example 5</p>
    </div>
    <div>
      <h3>Header 6</h3>
      <p>Text example 6</p>
    </div>
  </div>

  <div id="links_2">
    <div>
      <h3>Header 7</h3>
      <p>Text example 7</p>
    </div>
    <div>
      <h3>Header 8</h3>
      <p>Text example 8</p>
    </div>
    <div>
      <h3>Header 9</h3>
      <p>Text example 9</p>
    </div>
    <div>
      <h3>Header 10</h3>
      <p>Text example 10</p>
    </div>
    <div>
      <h3>Header 11</h3>
      <p>Text example 11</p>
    </div>
    <div>
      <h3>Header 12</h3>
      <p>Text example 12</p>
    </div>
  </div>

  <div id="links_3">
    <div>
      <h3>Header 13</h3>
      <p>Text example 13</p>
    </div>
    <div>
      <h3>Header 14</h3>
      <p>Text example 14</p>
    </div>
    <div>
      <h3>Header 15</h3>
      <p>Text example 15</p>
    </div>
    <div>
      <h3>Header 16</h3>
      <p>Text example 16</p>
    </div>
  </div>
</section>

Answer 3

使用 flexbox 和媒体查询你可以解决这个问题。如果你想改变 HTML 你仍然需要 CSS 和/或 JS 来隐藏/显示特定的 HTML 部分。

#links {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-flow: wrap;
}

#links div {
  flex-grow: 1;
    flex-basis: calc(100% / 3);
    width: calc(100% / 3);
    height: 100%;
}

@media only screen and (max-width: 700px) {
  #links div {
    width: 100%;
    flex-basis: 100%;
    height: auto;
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<section id="links">
  <div id="links_1">
    <div>
      <h3>Header 1</h3>
      <p>Text example 1</p>
    </div>
    <div>
      <h3>Header 2</h3>
      <p>Text example 2</p>
    </div>
    <div>
      <h3>Header 3</h3>
      <p>Text example 3</p>
    </div>
    <div>
      <h3>Header 4</h3>
      <p>Text example 4</p>
    </div>
    <div>
      <h3>Header 5</h3>
      <p>Text example 5</p>
    </div>
    <div>
      <h3>Header 6</h3>
      <p>Text example 6</p>
    </div>
  </div>
  <div id="links_2">
    <div>
      <h3>Header 7</h3>
      <p>Text example 7</p>
    </div>
    <div>
      <h3>Header 8</h3>
      <p>Text example 8</p>
    </div>
    <div>
      <h3>Header 9</h3>
      <p>Text example 9</p>
    </div>
    <div>
      <h3>Header 10</h3>
      <p>Text example 10</p>
    </div>
    <div>
      <h3>Header 11</h3>
      <p>Text example 11</p>
    </div>
    <div>
      <h3>Header 12</h3>
      <p>Text example 12</p>
    </div>
  </div>
  <div id="links_3">
    <div>
      <h3>Header 13</h3>
      <p>Text example 13</p>
    </div>
    <div>
      <h3>Header 14</h3>
      <p>Text example 14</p>
    </div>
    <div>
      <h3>Header 15</h3>
      <p>Text example 15</p>
    </div>
    <div>
      <h3>Header 16</h3>
      <p>Text example 16</p>
    </div>
  </div>
</section>

Answer 4

我正在处理类似的情况，因此选择了 flexbox 路线。这是我提出的解决方案：

使用移动设备优先的方法编写您的 HTML 和 CSS。这意味着您的 HTML 应该是一个不间断的列表；无需手动分列。类似于：

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    ...
    <li>Item 15</li>
</ul>

现在您已经有了合适的列表，使用媒体查询在视口扩展时更改属性：

@media (min-width: 701px) {
    ul {
        display: flex;
        flex-flow: column wrap;
        height: 9rem;
    }
    
    li {
        width: calc(100% / 3);
    }
}

现在，除此之外还有边距和填充重置、框大小调整（如果需要）等。主要的 "drawback" 是您必须为列表指定高度 - 否则随着父项 <ul> 扩展以容纳其内容，列表项将继续运行在单个列中。直到列表项运行超出父级的高度，它们才会开始换行到另一列。

注意：这应该适用于 IE10+ 和大约 3 年及更新版本的所有其他浏览器。

如何将三列布局转换为移动设备的单个无序列表？

How can I convert a three-column layout to a single unordered list for mobile?

html

css

html-lists

css-float