「display:table-cell」を使って欄の高さを揃えているボックス内の要素の一部を下に移動する

image

続きを読む

#2013

display:table-cell を使って高さの同じ枠付きのボックスを作成する -見かけ上、ボックスを縦方向につなげる方法についての考察-

記事「記事内に高さの同じ枠つきの欄を作成する –display: table を使う方法 -(改)」において、display:table-cell を使って高さの同じ枠付きのボックスを作成する方法について検討しましたが、今度はさらに「見かけ上」ボックスを縦方向につなげる方法について検討してみました。

やり方は、「つなげる」のではなく、「display:table-cell を指定したボックスの中に display:table-row を指定したボックスを複数入れて分割し、結果的にその他のボックスがつながったように見せる」という方法です。

各ブラウザ対応の方は概ね、OK っぽいです。

sdgafgsfd
mac の safari

続きを読む

#2013

記事内に高さの同じ枠つきの欄を作成する –display: table を使う方法 -(改)

最終更新日:2014-05-30

以前、「記事内に高さの同じ枠つきの欄を作成する –display: table を使う方法 –」という記事を書きましたが、欄の間に隙間を作るのに、border を背景と同じ色にするといった力技ではなくて、スマートな方法が分かったので、その覚書です。

display:table を指定している要素に「border-collapse: separate; border-spacing: 10px;」といった感じの記述を追加すると、欄と欄との間にスペースを確保できるようです。

ブログ上での表示は、以下のような感じです。

見出し

本文 本文 本文 本文 本文 本文

見出し

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文

見出し

本文 本文 本文

見出し

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文

見出し

本文 本文 本文

見出し

本文 本文 本文

見出し

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文

見出し

本文 本文 本文

見出し

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文

続きを読む

#2013

記事内に高さの同じ枠つきの欄を作成する –display: table を使う方法 –

※ 改訂版を作成しました。
記事内に高さの同じ枠つきの欄を作成する –display: table を使う方法 -(改)
(2013年4月10日追記)

前回の記事「記事内に高さの同じ枠つきの欄を作成する - margin-bottom: -32768px を使う方法 –」の方法だと、記事への記述がちょっとごちゃごちゃしていて、カスタム CSS をあまり有効に利用できていないような気がするので、極力、記事への記述を最小限に抑える方法のひとつとして、「display: table」を使って、記事内に高さの同じ枠つきの欄を作成する方法について検討してみました。

検討した結果を反映させたデモは以下のとおりです。

srgadafda

続きを読む

#2013, #nodisplay

カラム状の記事をレスポンシブ対応させる

まとめ記事を以下のようなカラム状に表示できるようにしたので、その方法についての覚書です。

fgsdfgdfs

続きを読む

#2013, #nodisplay

「display: table」の活用についての検討:フッターのカラムの高さを揃える

3月 | 2013 | comemo | ページ 2

続きを読む

#2013

「display: table(+display: table-cell)」の表示確認

gfsgfsdf

続きを読む

#2013