Question

我有一个布局问题，总结在图像中。实际上，我有两行包含span4 div。问题是第一行中的一个div太高而且它决定了行的高度。在第二行中，我有一个小div，如果它可以填充上面一行的空白区域，那将是很好的。有没有css3技巧呢？

请看一下图片。我在这里添加了一个jsfiddle：

<body>
<div class="container">
    <div class="row-fluid">
        <div class="span12">
            <div class="row-fluid">
                <div class="span4">
                    <div class="sub1"> <a href=""><span class="icon-play"></span>item 1</a>

                    </div>
                    <div class="row-fluid">
                        <div class="span11 offset1">
                            <div class="sub2"> <a href="">item
                </a>
                            </div>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span11 offset1">
                            <div class="sub2"> <a href="">item
                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="span4">
                    <div class="sub1"> <a href=""><span class="icon-play"></span>items</a>

                    </div>
                    <div class="row-fluid">
                        <div class="span11 offset1">
                            <div class="sub2"> <a href="">item
                </a>
                            </div>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span11 offset1">
                            <div class="sub2"> <a href="">item
                </a>
                            </div>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span11 offset1">
                            <div class="sub2"> <a href="">item
                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="span4">
                    <div class="sub1"> <a href=""><span class="icon-play"></span>item</a>

                    </div>
                    <div class="row-fluid">
                        <div class="span11 offset1">
                            <div class="sub2"> <a href="">item
                </a>
                            </div>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span11 offset1">
                            <div class="sub2"> <a href="">item
                </a>
                            </div>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span11 offset1">
                            <div class="sub2"> <a href="">item
                </a>
                            </div>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span11 offset1">
                            <div class="sub2"> <a href="">item
                </a>
                            </div>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span11 offset1">
                            <div class="sub2"> <a href="">item
                </a>
                            </div>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span11 offset1">
                            <div class="sub2"> <a href="">item
                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span4">
                    <div class="sub1"> <a href=""><span class="icon-play"></span>item</a>

                    </div>
                    <div class="row-fluid">
                        <div class="span11 offset1">
                            <div class="sub2"> <a href="">item
                </a>
                            </div>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span11 offset1">
                            <div class="sub2"> <a href="">item
                </a>
                            </div>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span11 offset1">
                            <div class="sub2"> <a href="">item
                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

html来自菜单的动态构造，基于存储在CMS中的项目，所以我没有那么多的控制权。

bad layout

desired layout

Answer 1

执行此操作的唯一方法是使用包含a和d的包含div，

这是一个jsfiddle链接：http://jsfiddle.net/jQYtd/

<div class"cont">
<div class="cont2">
    <div id="a">A</div>
    <div id="d">D</div>
</div>

<div id="b">B</div>
<div id="c">C</div>

和css

.cont {
overflow:auto;
border:1px solid #ccc;
}

.cont2, #a, #b, #c {
float:left;
background-color:grey;
width:30px;
}
#a, #b, #c{
background-color:green; 
height:30px;
}
#c {
background-color:red;
height:60px;
}

如果您无法控制HTML，则可以使用jquery添加cont2 div

通过jquery做到这一点，你会做这样的事情

$( "#a, #d" ).wrapAll( "<div class='cont2'></div>" );

是否可以连续推高div以填充上一行的空白区域？

1 个答案: