html - CSS灵活元素布局：固定左侧位置但下沉以避免重叠？

Question

当我有一个从某个固定百分比位置开始的标签列表时，我正在尝试构建一个布局，但是如果页面变窄，我希望它们在单独的行上下推以避免它们重叠：

|        |<- 10%   |<-20%     |
label1   label2    label3

|    |    |    |
label1
     label2
          label3

到目前为止，我无法做到这一点（尝试过浮动、间隔 div、跨度），并且我开始认为这可能是不可能的，因为渲染是如何流动的。

你知道是否有解决方案，或者我可以做些什么？这是我清理过的jsfiddle模板。

Answer 1

我想到的唯一方法是使用媒体查询。您必须对希望“跳转”发生的特定屏幕进行硬编码。恐怕只有 CSS 无法以智能和自动化的方式做到这一点。

@media only screen and (max-width: 35em) {
    .d2 {margin-top: 1em;}
    .d3 {margin-top: 2em;}
}

你可以在这里看到一个例子http://jsfiddle.net/wPrq8/

Answer 2

要使用纯 css 接近这种行为，需要将它们浮动。但是，如果您的意图是让它们立即全部向下移动，那么我还没有找到实现这一目标的方法。