显示后在flex布局中重新显示div :无
显示后在flex布局中重新显示div :无
提问于 2018-09-14 08:01:46
我有两个备用的main (本质上是两个侧边栏)，它们必须被隐藏才能使我的中央div div的“全屏”，我使用display : block来分配屏幕的比例，然而，当重新显示元素为div时，它完全破坏了原来的布局。隐藏和显示的代码如下所示。我正在使用d3进行DOM操作。
function handlefullscreen(){
if(d3.select("#fullscreen").attr("data-selected") == 1){
d3.select("#fullscreen").attr("data-selected", 0);
d3.selectAll(".aside")
.style("display", "block")
.transition()
.ease(d3.easeCubic)
.duration("250")
.style("opacity", 1).on("end",
redraw);
} else{
previousWidth = document.getElementById('left').offsetWidth;
d3.select("#fullscreen").attr("data-selected", 1);
d3.selectAll(".aside")
.transition()
.ease(d3.easeCubic)
.duration("250")
.style("opacity", 0)
.on("end", function(){
d3.select(this).style("display", "none");
redraw();
});
}
}下面是我对flex元素使用的CSS：
.wrapper {
height: 100%;
margin: 0 -10px;
display: flex;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
}
.wrapper > * {
padding: 0px;
}
.main {
background: #ffffff;
}
.aside-1 {
box-shadow:5px 1px 6px #4E565E;
background: #d8d8d8;
z-index: 1;
}
.aside-2 {
margin: 0 0px;
box-shadow:-5px 1px 6px #4E565E;
background: #d8d8d8;
}
@media all and (min-width: 600px) {
.aside { flex: 1 20%; }
}
@media all and (min-width: 800px) {
.main { flex: 3 60%; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
}回答 1
Stack Overflow用户
发布于 2018-09-14 08:11:12
应将显示块更改为显示flex。
d3.selectAll(".aside")
.style("display", "flex")
.... // rest of the code记住，flex是display属性的另一种模式。
希望这能有所帮助
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52323268
复制相关文章
相似问题
腾讯云开发者
