html – 使用CSS拆分条形图

发布时间：2020-12-14 22:53:07 所属栏目：资源来源：网络整理

导读：我正在尝试使用CSS创建一个分割条形图.我的意思是这样的 _____ __________ __|____| Text |_________||_______| Text |___|__ |______| Text |______| (请原谅粗略的图纸！我希望它有意义) 无论如何,我到目前为止的代码创建了我在JSFiddle上附加的内容 HTML

我正在尝试使用CSS创建一个分割条形图.我的意思是这样的……

   _____       __________
 __|____| Text |_________|
|_______| Text |___|__
 |______| Text |______|

(请原谅粗略的图纸！我希望它有意义)

无论如何,我到目前为止的代码创建了我在JSFiddle上附加的内容

HTML：


CSS：

dt { 
    float: left; padding: 4px; 
}

.bar {
    margin-bottom: 10px;
    color: #fff;
    padding: 4px;
    text-align: center;
    background-color: #FFC94D;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

我已经玩了好几个小时,但是无法弄清楚如何最好地在文本中心栏的左侧放置第二个栏.我得到的最接近的是两个酒吧在彼此的顶部？！我认为有一种更好的方法可以做到这一点,但老实说我没有线索.有没有人有可能的解决方案？
非常感谢,
戴夫


最佳答案
坚持使用描述列表(< dl>,< dt>,< dd>)可以在不破坏HTML流程的情况下使其变得有点困难,但我认为我找到了一种有效的方法,并且大部分都是流动的.
首先,添加第二个条形作为附加< dd>元素,从而维护适当的HTML结构：


接下来,将您的< dt>居中元素并给它们一个流体的宽度和高度：

dl {
    width: 100%;
}
dt {
    height: 2rem;
    width: 8%;
    margin: 0 auto;
    text-align: center;
    line-height: 2rem;
}

现在给你的< dd>元素剩余宽度并左/右浮动：

dd {
    width: 46%;
    margin: -2rem;
}
dd:nth-of-type(odd),dd:nth-of-type(even) div {
    float: left;
}
dd:nth-of-type(even),dd:nth-of-type(odd) div {
    float: right;
}

这里工作jsfiddle.
我不喜欢这个解决方案的一件事是,我必须给< dd>元素的负上边距等于< dt>的高度.元素,以协调事物.也许其他人可以想出一个更好的方法来解决这个问题…我什么都想不到.

                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!