html - 当两个元素向右浮动时,它们会切换位置
问题描述
我需要将两个元素放置在父元素的右侧,但是,当使用该float: right
属性时,它会使元素切换位置。
我看了一下这个线程:防止右浮动元素交换然而,添加display: inline-block
并text-align: right
没有解决问题。
这里有一个
.container {
width: 300px;
height: 20px;
background-color: red;
margin: 0 auto;
}
.element1 {
float: right;
height: 20px;
width: 10px;
background-color: blue;
color: white;
padding: 10px;
}
.element2 {
float: right;
height: 20px;
width: 10px;
background-color: yellow;
padding: 10px;
}
<div class="container">
<div class="element1">1</div>
<div class="element2">2</div>
</div>
我想要的结果是蓝色元素,然后是黄色元素。
更新:
我确实理解这是预期的行为,第二个元素在第一个元素之后一直发送到右侧,我知道改变元素可以解决问题,但是,只是想知道是否有 CSS 解决方案它。
解决方案
.container {
display: flex;
}
.element4 {
margin-right: auto;
}
.element5 {
margin-left: auto;
}
.container {
width: 300px;
background-color: red;
}
.element {
height: 20px;
width: 10px;
padding: 10px;
}
.element1 {
background-color: blue;
color: white;
}
.element2 {
background-color: yellow;
color: black;
}
.element3 {
background-color: green;
color: white;
}
.element4 {
background-color: gold;
color: black;
}
.element5 {
background-color: magenta;
color: black;
}
.element6 {
background-color: goldenrod;
color: white;
}
<div class="container">
<div class="element element1">1</div>
<div class="element element2">2</div>
<div class="element element3">3</div>
<div class="element element4">4</div>
<div class="element element5">5</div>
<div class="element element6">6</div>
</div>
推荐阅读
- android - 如何处理 SQLiteDatabase 中 SELECT 查询语句中无法识别的字符?
- flutter - 在颤动中将第一个小部件居中
- javascript - 我想隐藏如果未指定自定义字段,则“softdown”部分
- kubernetes - Kubernetes,Helm - 指定配置时 helm 升级失败 - JupyterHub
- python - 在 IDE 中如何正确关闭 Python 程序?
- postgresql - PostGIS - 寻找空间和时间的交叉点
- python - 从 discord.py 中的反应中获取表情符号
- node.js - 使用 PM2 运行多个 git 分支
- flutter - ChangeNotifier - 如何动态更新或重建构造函数列表?
- javascript - Snowflake JavaScript UDF 不支持 .replaceAll?