如何将三列布局转换为单个移动无序列表?

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

我正在处理类似的情况，并选择走弹性框路线。这是我提出的解决方案：

1. 使用移动优先的方法编写 HTML 和 CSS。这意味着您的 HTML 应该是一个不间断的列表;无需手动分成列。像这样：

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

2. 现在您已经有了正确的列表，请在视区展开时使用媒体查询更改属性：

@media (min-width: 701px) {
ul {
display: flex;
flex-flow: column wrap;
height: 9rem;
}

li {
width: calc(100% / 3);
}
}

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

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

Answer 2

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

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

您可以在函数中获取元素并重新排序或更改它们，CSS 不允许您更改 HTML，但如果您想通过 CSS 执行此操作，请阅读这篇关于 CSS float 的文章

Answer 3

即使使用 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 4

使用弹性框和媒体查询可以解决此问题。如果你想改变 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>