响应HTML/CSS树视图

2017-03-02 98 views 2 likes

我想建立响应树形图 - 基本的例子： https://jsfiddle.net/ppnfpggx/2/响应HTML/CSS树视图

但与响应布局我有一些问题。例如，在小设备就应该是这样的：

以上每个项目的行：

.tree-item::after { 
    content: ''; 
    position: absolute; 
    top: -15px; 
    left: -20px; 
    height: 4px; 
    background-color: #000; 
    width: 88px; // (48 + 20 + 20 -> half-margin on both sides) 
}

的项目数可以是动态的，所以我试着用:last-child玩去除::before，但有问题与前一个项目。当物品数量超过三个时，我真正需要的是，第三个物品应该关闭树，从其余物品pseudo-elements中删除，并以某种方式将最后两个物品居中，而不是margin-left。

我可以通过CSS/JS实现这个响应式视图，如果是，请提供任何想法或基本示例。

来源

2017-03-02 dieTrying

回答

我不知道这是不是你想要的，但是flexing通常是一种用css做出响应式设计的好方法。

#tree{ 
 
    display: flex; 
 
    justify-content: space-around; 
 
}

//编辑尝试把这段代码在你的CSS。不完美，但解决了最初的问题。

@media (max-width: 340px) { 
 
    .tree-item:nth-child(n+4)::before { 
 
     display: none; 
 
     } 
 
    .tree-item:nth-child(n+4)::after { 
 
    display: none; 
 
    } 
 
    .tree-item:nth-child(3)::after { 
 
     left: auto; 
 
     right: 50%; 
 
    } 
 
}

来源

2017-03-02 10:12:01 PederBG

呀，Flexbox的是响应很酷的东西，但我真的想从去年和前最后一个孩子的删除':: before'和':: after'，使之适应于所有情况（请参阅上面的屏幕） – dieTrying

响应HTML/CSS树视图

回答

相关问题