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

image

記事「記事内に高さの同じ枠つきの欄を作成する –display: table を使う方法 -(改)」等において、「display:table-cell」を使って、欄の高さを揃える方法について検討しましたが、せっかく、欄の高さを揃えてきれいに見せても、欄の中にある、比較的目立つボタンなどの位置が揃っていないと、その、綺麗に見せる効果も半減してしまいます。

そこで、比較的目立つボタンなどを各欄の右下に移動する方法について検討しました。

agsdfgsdfg

rect3015

adsgsdgsdfg

案の定、通常通り、起点にしたいボックスに対して「position: relative」を指定し、右下にもってきたいボタン等の要素に対して「position: absolute」を指定し、「bottom: 3px; right: 3px;」などと追加すれば、ボタン等が右下に移動しました。

image

ただし、記事「Browsers Bugs, Tips, and Tricks – forms」によると、「display:table-cell」を指定している要素に「position: relative」を指定し、その中の要素に「position: absolute」を指定しても、正常に機能しないらしいので、Firefox の場合には、「position: relative」にして、表示が乱れないようにしました。また、ie8 の場合、ちょっと表示が乱れるので、別途、位置を微調整しました。

以上の考察を踏まえ、CSS スタイルシートエディターに追加した CSS は以下のとおりです。

/* 記事一覧ボタンを右下にもってくる */
#text-101 .tablecolumn > div {
	position: relative;
	padding-bottom: 70px;
}

#text-101 .tablecolumn .button.pill.thick {
	position: absolute;
	bottom: 3px;
	right: 3px;
}

#ie8 #text-101 .tablecolumn .button.pill.thick {
	right: 18px;
}

#text-101 .tablecolumn .button.pill.thick, x:-moz-any-link {
	position: relative;
}

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。