Question

我目前正在尝试在一行中显示一系列div。当用户在小屏幕设备上时，我将该行分成多个片段。

我目前面临的问题是，如果用户在一个小窗口中启动，然后展开窗口，行将不会合并在一起。我相信这是因为切换已经定位，并且当屏幕改变大小时，chrome不会重新计算绝对位置。我在IE 11中测试了这个相同的页面，行最终合并。

所以我的问题：如何让CSS重新计算屏幕尺寸变化时的绝对位置？如果可能的话，我宁愿避免使用JS。

方案：

1从大到小，回到大。

用户启动大于35em的窗口。应该只有一行
用户将窗口调整为小于35em。现在应该有多行
用户将窗口大小调整为大于35em的值。应该只剩下一行。

2从小到大

用户加载小于35em的窗口。应该有多行。

用户将窗口大小调整为大于35em。应该只有一行。这是它失败的地方。我相信在chrome中，因为复选框绝对定位，div只会移动到复选框允许的位置。

.toggle {
    /* This is where the problem occurs I believe.  */
    position: absolute;
    /* We use left so that the user will still be on the same level*/
    left: -9999px;
}

.toggle + div label {
    display: inline-block;
    background-color: blue;
    color: #FFF;
    border: 2px solid #FFF;
}

/* Small Screen */
@media (max-width: 35em) {
    .toggle + div {
        display: block;
    }

    .toggle + div label {
        display: block;
    }

}
/* Large Screen */
@media (min-width: 35em) {
    .toggle + div {
        display: inline-block;
    }

    .toggle + div label {
        display: inline-block;
    }

}

    <main>
        <input class="toggle" type="checkbox" >
        <div>
            <label>Test1</label>
        </div>

        <input class="toggle" type="checkbox" >
        <div>
            <label>Test2</label>
        </div>

        <input class="toggle" type="checkbox" >
        <div>
            <label>Test3</label>
        </div>

    </main>

编辑： JSFiddle的代码：http://jsfiddle.net/wgLwkd85/

CSS具有媒体查询的Chrome中的绝对位置

0 个答案: