是否有可能推高一个div在一排，以填补上述行空的空间？(Is it possible to push

2019-10-19 20:30发布

站内文章 / 移动开发
37 0 0

我有一个布局问题，在总结图像。 实际上，我有一个包含span4的div两行。 问题是，第一排的一个格太高，它决定了行的高度。 在第二行中，我有一个小格，这将是巨大的，如果它可以填补上面行的空白处。 是否有一个CSS3把戏做到这一点？

请看一看图像。 我在这里加了的jsfiddle：

http://jsfiddle.net/XmZwh/3/ 

<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项目的动态构建的，所以我没有过这么多的控​​制。

Answer 1:

做到这一点的唯一方法是通过具有包含一个和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>" );


文章来源: Is it possible to push up a div in a row to fill empty space of the above row?
标签： css3 twitter-bootstrap
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~