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

时间：2018-07-05 18:54:44

标签： html css css-float html-lists

我正在制作一个响应式网页，当前该网页有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>

4 个答案:

答案 0 :(得分：0)

通过jquery，您可以按以下方式处理窗口调整大小事件：

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

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

答案 1 :(得分：0)

您甚至可以通过添加样式礼节并使用百分比进行自适应调整，甚至使用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>

答案 2 :(得分：0)

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

答案 3 :(得分：0)

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

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

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

  1. 现在您有了正确的列表，请在视口扩展时使用媒体查询更改属性：

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

现在，添加的内容包括边距和填充重置，框大小调整（如果需要）等。主要的“缺点”是您必须为列表指定高度-否则列表项将当父级<ul>扩展以容纳其内容时，它将继续在单个列中运行。直到列表项在父项中用完时，它们才会开始包装到另一列中。

注意：这应在IE10 +和所有其他大约3年及更高版本的浏览器中使用。

相关问题
最新问题