我正在尝试使用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流程的情况下使其变得有点困难,但我认为我找到了一种有效的方法,并且大部分都是流动的.
原文链接：https://www.f2er.com/html/426032.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>的高度.元素,以协调事物.也许其他人可以想出一个更好的方法来解决这个问题…我什么都想不到.
