LESS / CSS - 将未知宽度的容器分成四个部分？

Question

可以用 LESS 完成吗？

我有一个主容器，我不知道它的宽度。宽度也可能会有所不同，具体取决于浏览器 window 宽度等

在该容器内，我希望有 4 个（或 n）同样宽度的子容器（跨度或 div）。

不知道主容器的实际宽度，有没有办法在 LESS 中进行某种计算，简单地将主容器的宽度称为 "the width"（因为缺少更好的词） , 然后让我把 "the width" 分成 4?

PS：如果我使用了任何令人困惑或不正确的命名法，请随时更正或编辑我的问题。

Answer 1

我觉得你想多了，你可以用标准 CSS 通过百分比来做到这一点。

HTML

<div class="container">
    <div class="quarter">Content 1</div>
    <div class="quarter">Content 2</div>
    <div class="quarter">Content 3</div>
    <div class="quarter">Content 4</div>
</div>

LESS/CSS

div.container {
    width: 100%;

    div.quarter {
        width: 25%;
        float: left;
    }
}

而不是 float: left 如果你想玩一点，你可以尝试 display: inline-block。

JSFiddle example

LESS / CSS - 将未知宽度的容器分成四个部分？

LESS / CSS - Split unknown width container into four parts?

css

less