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>

让它显示如下：

[内容1] [内容3] [内容4]

[参与者2]

（编辑：我上传了IllimarPihlamäe解决方案的截图，这是我想要的） example 我需要css来制作expanded内容弹出。我该怎么做，有这个技术的名字吗？

我更喜欢非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;
            }

虽然有效但我实际上并不建议使用它。这里的问题是你需要知道布局框的高度。但如果你的情况如此，那就行了。

Answer 2

所以这是答案，不，没有。为什么导致css不是为了你想要条件的下一件事，这很自然，但这就是为什么我们有一个编程语言。

我制作了一个javascript。

http://jsfiddle.net/mcDrz/

var e=$('.extend');
$('.con').click(function(){e.html($(this).html());});
$(window).resize(setH);

function setH(){
    e.height( $(window).height()-e.offset().top );}

setH();

使用CSS来“弹出”div列表中的div

2 个答案: