11

今日もう一度、私はcssレイアウトでいつも抱えている問題に遭遇しました。水平方向に5つのdivを配置したいと思います。たとえば、それらの幅は次のようになります。

  • 1：60ピクセル、
  • 2：30％、
  • 3：40px、
  • 4：*
  • 5：100px

ここで、*は「残りのスペースを埋める」を表します。昔は、それが幅テーブルのレイアウト方法でした。現在、アクセスの理由により、htmlテーブルはレイアウトで禁止されています。これは単なる例です。私は一般的な解決策を探しています。

ジェネレーター、軽量のjavascriptソリューション（jQueryプラグインの場合もあります）、チュートリアル、本、またはこの問題を今も永遠に解決するのに役立つマジシャンを知っている人はいますか？

javascriptベースのソリューションが可能ですが、非スクリプトソリューションが推奨されます。

4

2 に答える 2

23

display:tableこの効果を作成するために使用できます、私は簡単なフィドルを作りました

これにより、個人divの動作がテーブルセルのようになります。これsectionがテーブルです。コードを整理するためだけにセクションを使用しましたが、これdivも機能します。

ウィンドウサイズが小さすぎると、テーブルのセルが指定したサイズよりも小さくなることがわかります。これは、テーブルのデフォルトの動作が原因です。これに対抗するには、最小幅を追加するだけです（幅と同じ値）

于 2012-10-17T13:11:32.040 に答える
8

http://jsfiddle.net/lnplnp/bFrmD/

#div1 {
    width: 60px;
}
#div2 {
    width: 30%;
}
#div3 {
    width: 40px;
}
#div4 {
}
#div5 {
    width: 100px;
}
.layout {
    display:table;
}
.cell {
    display: table-cell;
}​

<html>
    <head>
        <title>DIV LIKE TABLE</title>
    </head>
    <body>
        <div class="layout">
            <div id="div1" class="cell">1</div>
            <div id="div2" class="cell">2</div>
            <div id="div3" class="cell">3</div>
            <div id="div4" class="cell">4</div>
            <div id="div5" class="cell">5</div>
        </div>
    </body>
</html>

指を交差させてください！最近のbroswersであなたは今それをすることができます！

于 2012-10-17T13:55:40.780 に答える