html - 如果它包裹/溢出,则更改 div 顺序,无需媒体查询
问题描述
这是我的问题。我有一个导航栏,其菜单/链接位于中心。左边是 logo,右边是 cta 按钮和图标
如果它溢出/换行,则中心列应以全宽将其放在下一行,左右列作为 2 列保持在顶部。
鉴于此示例代码:
* {
box-sizing: border-box;
}
body, html {
margin: 0;
padding: 0;
}
.content {
display: flex;
flex-wrap: wrap;
}
.a, .b, .c{
border: 1px solid black;
flex: 1;
padding: 10px;
}
.b, .c {
flex-wrap: wrap-reverse;
}
<div class="content">
<div class="a">LogoAndStuff</div>
<div class="b">Link1,Link2,Link3,Link4</div>
<div class="c">Buttons,Icons</div>
</div>
小提琴:https ://jsfiddle.net/3erodmv7/3/
菜单项/链接具有动态宽度,因此我依赖溢出/换行而不是固定宽度和媒体查询。
不溢出:
--------------------------------------
| Logo | Link1,Link2,Link3 | Buttons |
--------------------------------------
溢出:
------------------------------------
| Logo | Buttons |
------------------------------------
| Link1,Link2,Link3 |
------------------------------------
解决方案
使用 float 您可以近似此值,但您在控制宽度方面的灵活性将降低,就像您对flex
属性所做的那样
* {
box-sizing:border-box;
}
body,
html {
margin: 0;
padding: 0;
}
.a,
.c {
border: 1px solid black;
padding: 10px;
width:33%;
min-width:110px;
}
.a {
float:left;
}
.c {
float:right;
}
.b {
border: 1px solid black;
}
.b span{
display:inline-block;
padding: 10px;
}
<div class="content">
<div class="a">LogoAndStuff</div>
<div class="c">Buttons,Icons</div>
<div class="b"><span>Link1,Link2,Link3,Link4</span></div>
</div>
推荐阅读
- html - Bootstrap 4 标志在桌面上的位置中心
- c# - .net core 和 IIS 安装和配置的 Inno Setup
- scala - 我的 Maven 项目配置错误是什么?不选择依赖项或类结构
- javascript - ReactJS 中的基石工具 - 不处理第一个加载位之后工作
- javascript - 超链接并显示选项卡
- javascript - 如何将自定义指令绑定到所有输入元素?
- c++ - 如何创建包含 .h 中的类和两个 .cpp 文件的类模板?
- ios - iOS 单元测试覆盖率 - 声纳报告 - xccov
- java - 基于jmeter api从java构造一个复杂的jmx文件
- ios - 如何在另一个侧边菜单项中显示标签栏?