作者：郭怡如珮尧琼江 | 来源：互联网 | 2023-05-16 12:43
我有这个简单的div,里面有一个按钮.justify-content: center;使用Firefox和Chrome工作正常,但在IE 11上不起作用:
#div {
height: 200px;
width: 50px;
border: 1px solid black;
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
}
#button {
height: 50px;
width: 200px;
min-width: 200px;
border: 1px solid black;
background-color: red;
}
我的目标是,当我用transform同rotate(90deg)或rotate(270deg),该按钮就会融入DIV:
#div {
height: 200px;
width: 50px;
border: 1px solid black;
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
}
#button {
height: 50px;
width: 200px;
min-width: 200px;
border: 1px solid black;
background-color: red;
transform: rotate(90deg);
}
该height和width的div和button始终是相同的,但是是可定制的.
尽可能地,我不喜欢包裹元素.
1> misterManSam..：
IE11需要父母拥有flex-direction: column.
此示例将您的按钮旋转:
#div {
height: 200px;
width: 50px;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column
}
#button {
height: 50px;
width: 200px;
min-width: 200px;
border: 1px solid black;
background-color: red;
transform: rotate(90deg);
}
2> 小智..：
就我而言，我必须将flex容器的高度设为100％。证明内容在此之后没有任何问题。
我还必须使（第一级）儿童的最大宽度为100％，以解决一些水平溢出的内容。
京公网安备 11010802041100号