所以我正在玩一个布局,我偶然发现了一个很酷的技巧,但我不知道为什么会有效?链接到示例。
http://codepen.io/TaylorHuston/pen/NNjZqZ
<div id="container">
<div id="left">
</div>
<div id="right">
<button id="expand">Expand</button>
</div>
</div>
.....
body {
background-color: green;
}
#container {
display: flex;
background-color: white;
width: 1300px;
height: 500px;
margin: 0px auto;
}
#left {
background-color: grey;
width: 0;
transition: all .2s ease;
}
#left.expanded {
width: 300px;
}
#right {
flex: 0 0 100%;
margin-right: -400px;
}
....
$('#expand').click(function() {
$('#left').toggleClass('expanded');
});
使用该代码,当您点击&#39;展开&#39;按钮,左列扩展到300px宽,右列超过300px。它实际上被推翻了,它并没有相应缩小。如果没有设置负边距,则没有任何反应,因为#right是100%宽度。为什么负边距允许#right在左边有东西的情况下被推动,但是当没有#t?t时,它实际上没有移动或影响它?