AとCがスペースを埋める間に、Bを固定の800pxサイズにするにはどうすればよいのですか? http://jsfiddle.net/8ufuV/3列、中央の列固定、両側の親を埋める
答えて
最も簡単な方法は、display: table-cell
を使用することです。
を参照してください:http://jsfiddle.net/47d4f/
あなたの問題を解決し、また、コンテンツは、各列に異なる場合、あなたにequal height columnsを与える - それ以外の場合は取得するシンプルではない何か。
ブラウザのサポート:http://caniuse.com/css-table
http://jsfiddle.net/8ufuV/17/ すべての要素を左に浮動させる必要があります。次に幅を指定します(そうするときにパディング/マージンを忘れないでください)。下に表示したい要素にclear:left;
を追加します。
幸運
HTML:
<div id="main">
<div id="leftblock">a</div>
<div id="contentblock">b</div>
<div id="rightblock">c</div>
</div>
CSS:
#main {
display:table;
width:100%
}
div {
display: table-cell
}
#leftblock{
top: 0px;
left: 0px;
margin: 0px;
padding: 10px;
border: 5px solid #ccc;
voice-family: "\"}\"";
voice-family:inherit;
}
#contentblock{
padding: 10px;
border: 5px solid #ccc;
width: 100px;
}
#rightblock{
top: 0px;
right: 0px;
margin: 0px;
padding: 10px;
border: 5px solid #ccc;
voice-family: "\"}\"";
voice-family:inherit;
}
目的は何ですか? 'voice-family:'プロパティのうちのどれですか? –
** madprops **によってjsfiddleに投稿されたオリジナルのCSSファイルです。私はそれでどんな牧場も作っていない。それもなくてもうまくいくでしょう。 – Mahbub
OK;あなたの答えは "use' display:table-cell'ですか?答えはコードに加えて説明する必要がありますので、あなたがそれを動作させるために何をしたのかがはっきりしています。 –
- 1. css 3列divs - 中間div固定幅 - 外側divs elastic
- 2. 2つの可変幅ビューを両側に揃えた親の中央テキスト
- 3. CSS。固定列のサイドカラムで3列レイアウト
- 4. 固定列のCSS 3列液体レイアウト
- 5. CSS - 弾性レイアウト、1流体+ 1固定列、中央揃え
- 6. html2pdfを使用し、両側の線で中央揃え
- 7. CSSヘルプ - 3列、2流体、1固定
- 8. 固定サイズの左の列と右の列の両方が100%の高さ
- 9. 可変側の3列ウェブデザイン
- 10. 2列のレイアウト(左の列は固定幅、右の流体は+クリア:両方)
- 11. ページ中央の段落を整列
- 12. 中央の3列のフェードレイアウトでメインコンテンツをラップする方法スティッキーフッターで
- 13. WPFでは、外側、中央、内側の境界を設定する方法は?
- 14. ディスプレイ中央の画像の列
- 15. 配列を中央から外側にループするアルゴリズムですか?
- 16. 右揃えや中央の列
- 17. ブートストラップ3に中央DIVの中心ブロック
- 18. CSS:下部固定メニューを中央に配置する方法
- 19. WPFスタックパネル中央に整列する
- 20. 3つのSPAN/DIVタグを調整する - 左固定、右固定、中塗り
- 21. CSSフッタ固定幅、画面の下端、中央に配置
- 22. 固定長のビット配列の配列
- 23. 3列の表。固定列の幅。他の2つの列に幅を共有する方法は?
- 24. FlexiGridの列ヘッダーの固定
- 25. 固定レイアウト(中央2列+ヘッダー、100%高さ)にスクロールバー(Jscrollpane)を追加する方法
- 26. 残りのスペースを埋める中行の3行テーブルレスCSSレイアウト
- 27. マッチ固定サイズの配列
- 28. 左列固定列列および右列列のCSSレイアウト?
- 29. jqgrid固定列ヘッダーと固定フッター
- 30. 3つの列レイアウト、固定と相対配置CSS
Little note:IE7以前は表セルをサポートしていないため、IE8には!DOCTYPEが必要です。 – Steven
おっとすみません私はあなたに私が投稿を混ぜた解決策を与えることを意味しました – madprops
それは私が1つの事を除いてそれを望む方法で動作します、私は位置になるためにCの列を必要とします:右にスペースを埋める、右にギャップがある、どうすればこの問題を解決できますか? – madprops