css - Chrome 77.0.3865.90 使用 margin-left 搞乱了布局:-100%
问题描述
body {
min-width: 660px; /* 2 x (LC fullwidth + CC padding) + RC fullwidth */
}
#container {
padding-left: 200px; /* LC fullwidth */
padding-right: 230px; /* RC fullwidth + CC padding */
}
#container .column {
position: relative;
float: left;
}
#center {
padding: 15px 15px; /* CC padding */
width: 100%;
}
#left {
width: 200px; /* LC width */
padding: 0 0px; /* LC padding */
right: 230px; /* LC fullwidth + CC padding */
margin-left: -100%;
}
#right {
width: 170px; /* RC width */
padding: 0 15px; /* RC padding */
margin-right: -100%;
}
<html>
<head>
</head>
<body>
<div id="container">
<div id="center" class="column">CENTER</div>
<div id="left" class="column">LEFT</div>
<div id="right" class="column">RIGHT</div>
</div>
</body>
</html>
我支持一个已经运行多年的网站。突然之间,Chrome 中的布局混乱了:左栏消失了,右栏出现在中间栏下方。在 Firefox 中仍然可以正常工作。CSS 使用左边距:-100%。寻找更好的方法来做到这一点的建议?(想知道 Chrome 是变好了还是变坏了?)谢谢
解决方案
谢谢克里斯·W。这让我走上了正轨。仍然好奇 Chrome 是否/为什么会改变,但不用担心。
#container {
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
}
#center {
order: 2;
}
#left {
order: 1;
flex-shrink: 3;
}
#right {
order: 3;
flex-shrink: 3;
}
<html>
<head>
</head>
<body>
<div id="container">
<div id="center" class="column">CENTER</div>
<div id="left" class="column">LEFT</div>
<div id="right" class="column">RIGHT</div>
</div>
</body>
</html>
推荐阅读
- android - 如何在 Flutter 中隐藏 Android 的底部操作栏?
- python - 损失值不降低
- css - 与浏览器相比,WebView 呈现的 CSS 不同
- flutter - Android Studio 模拟器 NO DC 注意
- entity-framework - DisplayFormat 不适用于 EF Core 中的计算属性
- gitlab-ci - 此 GitLab CI 配置无效:项目 `my-ci-test-group/test-yaml` 未找到或访问被拒绝!即使他们在同一组
- spring - 如何调试不起作用的 Spring @Value 注入?
- node.js - 渲染后如何重定向,而快递没有错误
- c# - 无法在 IIS 中发布 Web API 的问题
- sas - 查找每个时间段每个 ID 的 SAS 中变量的最大值