程序员经验分享-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 实现浮动侧边栏布局，内容环绕侧边栏？ 的相关文章

  • mailto：相当于电话的链接？ [复制]

    这个问题在这里已经有答案了 有没有办法使用 html 和 或 JS 链接图像以便拨打电话 类似于 mailto 链接 如果可能的话 这只会让生活变得更加轻松 假设如果一个人有 Skype 是否可以通过一个按钮为他们打开 Skype 并拨打电

  • HTML5中如何隐藏video标签的全屏按钮

    我需要隐藏 HTML5 中视频标签的全屏按钮 有什么办法可以实现吗 Thanks 我认为你可以通过更改 css 来实现这一点 document fragments 这些是 DOM1 规范 所有浏览器都支持 但关于样式 我不确定 Simple

  • jQuery能否获取未绘制的动态元素的大小

    我的意思是如果我用 jQuery 和 DOM 创建一个 Element var MainHolder document createElement div addClass box 如果我打电话MainHolder width 如果不在窗口

  • 智能位置表单字段

    我的用户注册表单上有一个文本字段location 我本质上希望这个字段能够根据 Google 地图 或同等地图 进行验证 只允许有效位置通过 最好采用类似的格式滑铁卢 伦敦 or 伦敦 英国 要求 除了位置名称之外 我还想返回该位置中心的坐

  • 无法在scrollView中滚动

    我有一个屏幕 我可以在输入字段中输入内容并获得相应的搜索结果 该列表在 ScrollView 中呈现 但当键盘打开时 在 Android 中 它仍然不允许我滚动 我怎样才能解决这个问题 return lt gt addressesFound

  • 等宽字体中的字体大小和字符宽度之间有什么依赖关系？

    等宽字体中的字体大小和字符宽度之间有什么依赖关系 在我的网络应用程序中 我使用 courier new 字体 我想知道 字符串的实际长度 以像素为单位 是多少 如果我知道CSS font size属性 它如何帮助我知道字符串的实际长度 谢谢

  • PHP：如何防止不必要的换行

    我正在使用 PHP 创建一些基本的 HTML 标签始终相同 但实际链接 标题对应于 PHP 变量 string p a href strong i title i i strong a br echo string fwrite outfi

  • 列表中允许 div 吗？ [复制]

    这个问题在这里已经有答案了 我知道DIV inside LI是不允许的 但我最近在许多 大 网站上看到了它 例如粉碎杂志 网页设计师墙 etc 我尝试验证网站 但它们有错误 但没有任何信息DIV in LI 那么我可以在里面使用它吗LI 我

  • 有什么方法可以在不重新加载的情况下更改标头 URL？ [复制]

    这个问题在这里已经有答案了 可能的重复 修改URL而不重新加载页面 https stackoverflow com questions 824349 modify the url without reloading the page 使用新

  • 如何在缩放动画中保持原点位于图像中心？

    我有类似的情况fiddle https jsfiddle net ddvn3p1h 3 其中我有一个 CSS3 动画 可以缩放绝对定位在另一个元素中心的元素 但是 当动画发生时 它会偏离中心 如示例中相对于蓝色的红色方块所示 我如何将其居中

  • css：将div制作成圆角并在其3/4处添加边框

    我有这样的代码 div class circle div and css circle border left 1px solid red border bottom 1px solid red border radius 200px wi

  • 如何使用 jQuery UI Sortable 正确相交？

    这是我对 jQuery UI Sortable 进行动画处理的尝试 https codepen io anon pen YdMOXE https codepen io anon pen YdMOXE var startIndex chang

  • iPad 2 的 HTML5 源元素错误是否已修复？

    根据这个页面 http camendesign com code video for everybody webm http camendesign com code video for everybody webm 第一个 iPad 有一

  • 更改文本框中一个字符的颜色 HTML/CSS [重复]

    这个问题在这里已经有答案了 我正在设计一个网站 我想问一下大家 如何通过CSS改变HTML文本框中字符串中的一个字符的颜色 示例 STACK OVER FLOW 只是 A 字母是红色的 你不能用常规方法做到这一点

  • 无法做到最大宽度

    我有一个页面 内容如下 div testingtestingtestingtestingtestingtestingtestingtestingtesting testingtestingtestingtestingtestingtesti

  • .net dropdownlist对齐文本

    我正在尝试将 net 下拉列表中的文本向右对齐 使用 CssClass 我可以在 Firefox 中将文本向右对齐 IE 不会将文本右对齐 而是左对齐 我读到 IE 6 不支持这个 这是真的 我使用的是 IE7 但我的大多数用户将使用 IE

  • 如何反转媒体查询中元素的顺序？

    我有两个 div 左和右 但是当屏幕小于 500px 时 左 div 成为底部 div 右 div 成为顶部 div DOM 中的第一个 div 应该显示为第二个 第二个 div 为第一个 I use display flex 然后 div

  • 如何更改 div 悬停时的跨度颜色

    我正在尝试更改 div 悬停时跨度的颜色 如何使红色汉堡按钮 即跨度 在 div 悬停时将颜色更改为黑色 PS 现在它在跨度的悬停上执行此操作 JSFiddle https jsfiddle net bjjbqct8 https jsfid

  • 如何在 Aframe 中的平面上加载 gif（具有透明度）（故障）？

    大家好 我是 Aframe 的新手 正在尝试在空间网络环境中设置一大堆 gif 我在飞机上加载 gif 时遇到了一些困难 我已经通过 Aframe 的资产文件夹加载了图像 故障 目前它看起来像这样

  • 右列固定的 Div 表

    我最近接手了一个非营利网站作为一个项目 我正在使用一个现有的网站 所以我必须使用很多已经编程的东西 所以我所要做的就是创建设计 I made a diagram of basically what I can t figure out ho

随机推荐

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

    我有一个使用 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 和

热门标签