程序员经验分享-hwhale

如何使用 Flexbox 实现浮动侧边栏布局，内容环绕侧边栏？

2023-12-23

我正在尝试实现在桌面上看起来像这样的响应式布局：

在手机上就像这样：

请注意以下要求：

  • 侧边栏应仅占据适合内容所需的垂直空间。在侧边栏下方，主要部分的内容应占据整个宽度。
  • 在移动设备上，侧边栏应显示在主要内容下方。

这是一个包含我最初的 HTML 和 CSS 的 jsfiddle：

https://jsfiddle.net/sergkr/np6k2tj3/ https://jsfiddle.net/sergkr/np6k2tj3/

和一个片段：

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  padding: 0 2em;
  line-height: 1.4;
  color: #333;
  background-color: #fff
}

section {
  margin: 1.6em 0;
}

section>h2 {
  margin: 0;
  padding: 12px 24px;
  font-size: 16px;
  background: #eceeee;
  text-transform: uppercase;
}

section>p {
  margin: 0;
  padding: 12px 24px;
  background: #fafafa;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

main {
  flex-basis: 100%;
}

.sidebar {
  padding: 0 2em;
  background: #fbf6f4;
}

@media screen and (min-width: 1024px) {
  .container {
    flex-wrap: nowrap;
  }
  main {
    flex: 1 1 70%;
  }
  .sidebar {
    flex: 0 0 30%;
    margin-left: 2em;
  }
}
<div class="container">
  <main>
    <h1>Main</h1>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa eaque hic voluptates quas minus minima, officiis, quaerat animi illum dolor est ipsum maiores sunt sint, velit consequatur illo perspiciatis magni!
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum placeat animi illum, a cumque ab illo soluta saepe dicta, deleniti voluptatibus ratione modi pariatur laudantium, nulla libero earum, ea molestias.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem sapiente labore eos quia assumenda quod perspiciatis odio sit, hic incidunt, eum, inventore qui veniam ex iure voluptatum deleniti accusamus quidem.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, quasi laudantium neque, dolor illo repellat totam fugiat veritatis sit harum, quam asperiores error minima ducimus id. Repellat ea, omnis veniam.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste vel harum, ratione voluptas qui odit ea ipsum ipsa distinctio laborum? Ut voluptate, accusantium alias, autem hic dignissimos corporis quas cum!
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum praesentium, aut! Nam officiis tempora reprehenderit, dignissimos minus voluptatum ullam. Doloremque quis dolorem tempora incidunt maiores iusto similique cumque atque repellendus?
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ab fugit repellendus exercitationem, incidunt perspiciatis, accusamus deserunt dolores molestias odio tenetur iure nesciunt! Officiis debitis, cumque impedit odit vero earum.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ratione doloribus repellat molestias dolorum quae, iste, quo corrupti impedit consequuntur quod ex magnam recusandae dolorem dignissimos incidunt, ducimus, quia ipsum.
      </p>
    </section>
  </main>
  <div class="sidebar">
    <h1>Sidebar</h1>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam deleniti officia nobis atque voluptatum maxime voluptas ipsum rerum accusantium repudiandae quae quia, quam quis. Consectetur dolorem excepturi assumenda reprehenderit accusantium.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos ab laborum numquam dolore eius, aperiam amet cumque. Laboriosam aut at cupiditate quis ea blanditiis eveniet, dolorum. Autem at, quisquam dolorem.
      </p>
    </section>
  </div>
</div>

请注意，侧边栏下方有浪费的空间。我希望主要内容在侧边栏结束后环绕并占据整个宽度，但我不确定如何实现这一点。

我想过使用float: right放在侧边栏上并将其放在<main>，但这会导致侧边栏首先出现在移动设备上（我希望它出现在内容之后）。

考虑到上述要求，有没有办法实现所需的布局，无论是使用 Flexbox、浮动还是其他技术？


你可以切换display and order with float。为了使用float你会需要aside首先出现在 HTML 中，因此内容可以环绕。flex and order会将其发送回移动设备上的底部。

Example https://codepen.io/gc-nomade/pen/qPzYbd或下面的代码片段，其中包含 HTML 更新，以从 Flex 布局切换到浮动布局

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  padding: 0 2em;
  line-height: 1.4rem;
  color: #ddd;
  background-color: #333
}

section {
  color:#333;
  margin: 1.6em 0;
}

section > h2 {
  margin: 0;
  padding: 12px 24px;
  font-size: 16px;
  background: #ace;
  text-transform: uppercase;
}

section > p {
  margin: 0;
  padding: 12px 24px;
  background: #fafafa;
}

.container {
overflow:hidden;
}

main {
  display:flex;
  flex-direction:column;
}

.sidebar {
  padding: 0 2em;
  background: tomato;
  order:2;
}

@media screen and (min-width: 1024px) {
  .container {
  }
  
  main {
    display:block;
  }
  main h1 {
    float:left;
    width:70%;
  }
  main section {
    clear:left;
    overflow:hidden;
  }
  
  .sidebar {
    width:25%;
    float:right;
    margin-left:2em;
  }
}
<div class="container">
  <main>
    <h1>Main</h1>
    <aside class="sidebar">
    <h1>Sidebar</h1>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam deleniti officia nobis atque voluptatum maxime voluptas ipsum rerum accusantium repudiandae quae quia, quam quis. Consectetur dolorem excepturi assumenda reprehenderit accusantium.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos ab laborum numquam dolore eius, aperiam amet cumque. Laboriosam aut at cupiditate quis ea blanditiis eveniet, dolorum. Autem at, quisquam dolorem.
      </p>
    </section>
  </aside>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa eaque hic voluptates quas minus minima, officiis, quaerat animi illum dolor est ipsum maiores sunt sint, velit consequatur illo perspiciatis magni!
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum placeat animi illum, a cumque ab illo soluta saepe dicta, deleniti voluptatibus ratione modi pariatur laudantium, nulla libero earum, ea molestias.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem sapiente labore eos quia assumenda quod perspiciatis odio sit, hic incidunt, eum, inventore qui veniam ex iure voluptatum deleniti accusamus quidem.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, quasi laudantium neque, dolor illo repellat totam fugiat veritatis sit harum, quam asperiores error minima ducimus id. Repellat ea, omnis veniam.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste vel harum, ratione voluptas qui odit ea ipsum ipsa distinctio laborum? Ut voluptate, accusantium alias, autem hic dignissimos corporis quas cum!
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum praesentium, aut! Nam officiis tempora reprehenderit, dignissimos minus voluptatum ullam. Doloremque quis dolorem tempora incidunt maiores iusto similique cumque atque repellendus?
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ab fugit repellendus exercitationem, incidunt perspiciatis, accusamus deserunt dolores molestias odio tenetur iure nesciunt! Officiis debitis, cumque impedit odit vero earum.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ratione doloribus repellat molestias dolorum quae, iste, quo corrupti impedit consequuntur quod ex magnam recusandae dolorem dignissimos incidunt, ducimus, quia ipsum.
      </p>
    </section>
  </main>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

flexbox

如何使用 Flexbox 实现浮动侧边栏布局，内容环绕侧边栏？ 的相关文章

随机推荐

  • 如何在页面加载时从表中加载一定数量的行，并且仅在用户加载更多行时加载它们？

    我有一个使用 DataTables 的表 它包含大量行 因此这会导致页面加载非常缓慢 因为我假设浏览器会等到表格填满后再显示页面 我只想加载表格的一页 10 行 并且仅在用户浏览表格时显示更多数据 显示加载标志也很棒 我研究并听说过一个名为

  • SSRS 2012 在何处以及如何下载

    我需要 SQL Server 2012 的 SSRS 但是我在任何地方都找不到它 有人可以提供帮助并共享链接吗 我在我的机器上找到了一个但它必需的 Sharepoint 我需要它用于学习目的 这样我就没有共享点 谢谢你 您需要拥有三个不同版

  • Python 中 _ 的作用是什么？ [复制]

    这个问题在这里已经有答案了 我在某处看到过关于 Python 中使用的字符如下 print 有人可以帮我解释一下它的作用吗 在交互式翻译中 始终指最后输出的值 gt gt gt 1 1 2 gt gt gt print 2 gt gt gt

  • 如何从 IBM Websphere 迁移到 Tomcat？

    我想要将现有的 IBM Websphere 应用程序服务器迁移到等效的 Tomcat 应用程序服务器吗 其次 如何使用 IBM HTTP Server ihs 配置这个迁移后的 Tomcat 应用服务器 简单介绍一下当前的系统 我们正在使用

  • C/C++ 代码的编码和命名约定测试

    我正在寻找一个可以自定义的脚本 工具来检查和强制执行 C C 代码的编码 命名约定 它应该检查例如 代码行以一定长度包裹 私有变量有前缀 代码缩进正确 所有功能均已记录 我正在从事的许多项目都是由客户外包的 这些客户往往有各种内部编码和命名

  • 是否可以在 android 中将动画 gif 文件设置为动态壁纸？

    我是 Android 平台的新手 我希望开发一个动态壁纸应用 当我在搜索引擎中搜索到此内容时 他们中的许多人创建了动态壁纸作为他们的代码 使用SurfaceView and Canvas 我对此了解不多 我的疑问是 任何可以将 gif 图像

  • Bootstrap 4：如何拥有一个包含容器中内容的全宽导航栏（如 SO 导航栏）？

    我正在使用 Bootstrap 4 如何制作像 SO 导航栏一样的导航栏 内容像 容器 一样对齐 但 Bootstrap 4 中 容器流体 的宽度 我想要 固定顶部 导航栏设置的宽度 而不是固定顶部和 容器 中的导航栏内容 我会提供一个示例

  • Python求和地理半径内的纬度/经度点并求和到网格

    基本上 我的实验程序试图找到给定时间落在有效点半径 例如 50 公里 内的点的数量 我的数据是结构化的 但如果需要的话我可以重组 在三个单独的数组中 例如 1 LAT 1 LON 1 TIM 其中 1 LAT 1 LON 1 TIM 均包含

  • 如何让窗体在按退出键时关闭？

    我有一个小窗体 当我按下 Windows 窗体应用程序中的按钮时会出现该窗体 我希望能够通过按退出键关闭表单 我怎么能这样做呢 我不确定要使用的事件 形式 关闭 如果表单上已有关闭表单的按钮 则可以在表单上设置一个属性来为您执行此操作 Se

  • 如何从视觉工作室外部打开WorkItem（VS-Team Explorer）？

    我想使用 C 代码从 Visual Studio 外部打开工作项 是否可以 我尝试过这个 IWorkItemDocument widoc null try string tfsName http rd tfs no2 8080 tfs si

  • .NET 中的 Getter 和 Setter 声明[重复]

    这个问题在这里已经有答案了 我想知道 getter 和 setter 的声明之间有什么区别 以及是否有首选方法 以及原因 第一个可以由 Visual Studio 自动生成 其他人呢 谢谢 1st string myProperty get

  • Java 中接口的重要性[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 假设我们有两个班级 Tiger an

  • Windows Remote 上 OpenGL 的现状和解决方案 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 OpenGL 和 Windows Remote 不能很好地配合 此问题的解决方案取决于用例 并且答案分散在网络的各个角落 当我开始研究这个

  • 在 Crystal Reports 中将行数据转置为列

    我从存储过程返回以下数据 Staff Category Amount Bob Art 123 Bob Sport 777 Bob Music 342 Jeff Art 0 Jeff Sport 11 Jeff Music 27 即使金额为零

  • Mac OS X：从目录服务获取当前用户的当前用户名和主目录

    我的应用程序是用 Objective C 编写的 如何通过目录服务获取当前登录用户的用户名和主目录 细节 我的 Cocoa 应用程序使用 getenv USER getenv HOME 获取当前用户名和主目录 显然 如果用户通过目录服务登录

  • leafletjs 添加可滚动弹出窗口？

    使用带有弹出窗口的 leafletjs 当我的弹出窗口包含最少的文本时 一切正常 如果我把它们做得更大 它们仍然可以正常工作 如果我添加太多 我会添加 maxHeight 到弹出窗口 它使弹出窗口可滚动 如果我一开始没有足够的内容来填充页面

  • 如何在 MediaPlayer setDataSource 中包含 http 标头？

    我正在将 URI 传递给设置数据源方法 http developer android com reference android media MediaPlayer html setDataSource 28java lang String

  • 使用动态发出的 POCO 进行快速序列化和反序列化

    我目前正在将 SQL 表行序列化为二进制格式 以实现高效存储 我将二进制数据序列化 反序列化为List每行 我正在尝试升级它以使用 POCO 它将动态生成 发出 每列一个字段 我在网上搜索了几个小时 偶然发现了像 EF T4 Expando

  • 如何替换字符串中的最后一个单词

    有谁知道如何替换字符串中的最后一个单词 目前我正在做 someStr someStr replace someStr substring someStr lastIndexOf 1 New Word 上面的代码替换了字符串中出现的每个单词

  • 如何使用 Flexbox 实现浮动侧边栏布局，内容环绕侧边栏？

    我正在尝试实现在桌面上看起来像这样的响应式布局 在手机上就像这样 请注意以下要求 侧边栏应仅占据适合内容所需的垂直空间 在侧边栏下方 主要部分的内容应占据整个宽度 在移动设备上 侧边栏应显示在主要内容下方 这是一个包含我最初的 HTML 和

热门标签