Question

我的网页左侧有一些文字行，并希望使用网页右侧的条形图标记不同颜色的线条。

基本上，布局应该看起来像like this：条形的位置对应于给定的线条范围。

我尝试使用css see this fiddle建模：

// html
<ul>
     <li style="top: 1em; height: 4em; background: brown;">1</li>
     <li style="top: 2em; height: 2em; background: red;">2</li>
     <li style="top: 3em; height: 3em; background: green;">3</li>
     <li style="top: 5em; height: 1em; background: blue; clear: left;">4</li>
</ul>

// css
li {
    list-style: none;
    display: inline-block;
    position: relative;
}

然而，最后一个条形图（蓝色条形图）从不包装到新的“线条”，而是仅附加到右侧。有没有可能在css中解决这个问题？

Answer 1

根据您的要求......您可以使用绝对定位：

Demo Fiddle

<ul>
    <li style="top: 1em; height: 4em; background: brown;left:1em;">1</li>
    <li style="top: 2em; height: 2em; background: red;left:2em;">2</li>
    <li style="top: 3em; height: 3em; background: green;left:3em;">3</li>
    <li style="top: 5em; height: 1em; background: blue;left:1em;">4</li>
</ul>

NB。虽然 - take your styles out of being inline!

以上fiddle使用nth-child，如果这些元素遵循某种可预测的顺序，您可以使用它来执行基本模式匹配。

或者您可以根据自己的要求使用CSS列...如果元素出现在专用的垂直通道中

请注意，如果不使用上述其中一项，您将需要使用自己的JS进行布局管理，或者使用预先存在的库，例如masonry或isotope，因为vanilla CSS和HTML不会允许元素的垂直嵌套行排序。

浮动自动中断

1 个答案:

Demo Fiddle