我的专栏看起来像这样:
这看起来不错,但当我缩小浏览器时,div
向上移动,如下所示:
我希望它在缩小时保持原状:
知道这里发生了什么 - 是否有针对此的css修复?
js(反应):
<div>
<Icon name="plus" style={{display: 'block', margin: '0 auto'}}/>
<div className="rotate-div">TESTING</div>
</div>
的CSS:
.rotate-div {
transform: rotate(270deg) !important;
margin-top: 30px !important;
}
我尝试增加容器的高度,去除填充物,增加更多的余量,但似乎没有任何区别。
答案 0 :(得分:0)
首先,我不建议使用!important
,这是不好的做法并混淆了你的代码。在这里,您只需要在“测试”和图标之间进行填充。对于旋转div:
.rotate-div {
padding-top: 20px; /* You can change the pixel amount */
}
删除margin-top和!importants
答案 1 :(得分:0)
最后,我更容易在父元素上使用position: relative
,在子元素上使用position: absolute
。
这是一个小提琴: