0

レスポンシブ デザインのブートストラップを実装しましたが、現在、入力要件は添付の jsfiddle のとおりです。システム入力は Tabular layout からのもので、ユーザーは 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;
}
4

1 に答える 1

0

私の知る限り、必要なレイアウト (レスポンシブでもあります) は css だけでは実現できません。CSS 列を使用して最新のブラウザーでピンタレストのようなレイアウトを取得できる場合がありますが、IE9 以前ではサポートされておらず、要件に適合しません (このリンクを確認してください)。

別の方法としては、 jQuery masonaryやisotopeなどの JavaScript ライブラリを使用すると、奇妙な形のアイテムをレイアウトでき、応答性が高くなります。

于 2013-03-18T14:12:00.257 に答える