将基于表格的布局的col-span,行间距转换为bootstrap响应式设计

时间:2013-03-18 08:15:57

标签: css3 twitter-bootstrap html

实现了响应式设计的引导程序,但现在输入要求与附加的jsfiddle相同。系统输入来自Tabular布局,用户可以在col span和row span中添加元素,但是当我将其转换为基于Div的响应式设计时,它无法正常工作。我尝试了div解决方案,但使用绝对位置,它不适用于响应式设计。 任何有关将基于表格的布局的行间距,行间距转换为引导响应式设计的帮助

谢谢,

http://jsfiddle.net/V6gEL/

>

HTML:

    <div class="col-span">1</div>
<div class="left row-span">3</div>
    <div class="middle">4</div>

<div class="row-span " style="top=0px; left: 240px;">2</div> 


<div class="right col-span " style="top:240px; left:120px;">5</div>

CSS:

div{
    position:absolute;
    height:100px;
    width: 100px;
    border: 2px solid #CCCCCC;
    float:left;
    top:0px;
    /*display:inline-block;*/
}

.right{
    position:absolute;
    background-color:Yellow;

}
.left{
     background-color:Red;
        top:120px;
}
.row-span{
    height:200px;
}
.col-span{
    width:200px;
}
.row{
    border:none;
    width:220px;

}

.middle{
    top:120px;
    left:120px;
}

1 个答案:

答案 0 :(得分:0)

AFAIK,您想要的布局(也是响应式)不能仅使用css完成。您可以使用CSS列在现代浏览器上获得类似布局的灵巧但IE9及更低版本不支持它并且它不符合您的要求(请查看此link)。

另一种选择是像jQuery masonaryisotope这样的javascript库,它允许布置奇形状的项目并且具有响应性。