html - 使用 CSS 到 'pop-out' div 列表中的一个 div

Question

我正在寻找一个纯 CSS 解决方案来执行以下操作:给定一些 HTML 结构

<div>
    <div>[content 1]</div>
    <div class="expanded">[some bigger content 2]</div>
    <div>[content 3]</div>
    <div>[content 4]</div>
</div>

让它显示为:

[content 1] [content 3] [content 4]

[ s o m e b i g g e r c o n t e n t 2 ]

(编辑:我已经上传了 Illimar Pihlamäe 解决方案的屏幕截图，这就是我想要的) 我需要 css 来制作 expanded 内容 pop-out。我该怎么做，这种技术有名称吗？

我更喜欢非 JavaScript 解决方案。

Answer 1

我能想到的最好的是这样的:

    <div class="LayoutContainer">
        <div class="top"><div class="container">content</div></div>
        <div class="expand"><div class="container">content</div></div>
        <div class="top"><div class="container">content</div></div>
        <div class="top"><div class="container">content</div></div>
    </div>

使用 CSS

            .top {
                float: left;
                width: 33.33%;
            }
            .expand {
                clear: both;
                width: 100%;

                position: absolute;
                top: 100px;
            }
            .top .container {
                background: #f00;
                border: 1px solid #333;
                height: 100px;
            }
            .expand .container {
                background: #0f0;
                height: 300px;
            }
            .LayoutContainer {
                position: relative;
                height: 400px;
            }

虽然有效，但我实际上不建议使用它。这里的问题是您需要知道布局框的高度。但是，如果您是这种情况，它会起作用。