記事内に高さの同じ枠つきの欄を作成する - margin-bottom: -32768px を使う方法 –

高さの同じ枠つきの欄を作成するとき、現在では jQuery を使うのが一般的なのだそうですが、また、一般のウェブサイトを見てみると、高さの同じ枠つきの欄自体、ほとんど使われていないようなので、個別に調整してしまったほうが手っ取り早いような気もするのですが、勉強の一環として、CSS のみを使って、記事内に高さの同じ枠つきの欄を作成する方法について検討してみました。

参考にしたのは以下の記事です。5年以上前の記事です。

agsgffsd
[CSS]高さの異なるカラムを揃えるスタイルシート | コリス

私が作成してみたのは、以下のようなものです。

sfgsfgs

記事に以下の記述を貼り、

<div class="comemo-column2">
<div style="width: 100%; overflow: hidden;">
<div style="border-radius: 7px; border: 4px solid #cccccc; vertical-align: top; display: inline-block; width: 48%; background-color: rgba(255,255,255,0.1); margin: 0 0.1% -32768px; padding-bottom: 32768px; overflow: hidden;">
<h2 style="background-color: #ccc; text-align: center; font-size: 14px; color: #555; border: none; margin: 0; padding: 10px 0 14px;">見出し</h2>
<img class="alignright size-thumbnail wp-image-105" alt="a0001_013626_m_1" src="http://asazuki.lolipop.jp/cssdemo/wp-content/uploads/2013/03/a0001_013626_m_1-150x150.jpg" width="150" height="150" />
<div style="padding: 15px 15px 0;">てすてす</div>
</div>
<div style="border-radius: 7px; border: 4px solid #cccccc; vertical-align: top; display: inline-block; width: 48%; margin: 0 0.1% -32768px; padding-bottom: 32768px; background-color: rgba(255,255,255,0.1); overflow: hidden;">
<h2 style="background-color: #ccc; text-align: center; font-size: 14px; color: #555; border: none; margin: 0; padding: 10px 0 14px;">見出し</h2>
<div style="padding: 15px 15px 0;">

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文
本文 本文 本文 本文 本文 本文 本文 <span id="anchor">本文</span> 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文

</div>
</div>
</div>
<div class="comemo-column2-sub" style="width: 100%; overflow: hidden; margin-top: -25px;">
<div style="border-radius: 7px; border: 4px solid #cccccc; vertical-align: top; display: inline-block; width: 48%; background-color: rgba(255,255,255,0.1); margin: -32768px 0.1% 0; padding-top: 32768px;"><span style="color: white">tesutesu</span></div>
<div style="border-radius: 7px; border: 4px solid #cccccc; vertical-align: top; display: inline-block; width: 48%; margin: -32768px 0.1% 0; padding-top: 32768px; background-color: rgba(255,255,255,0.1);"> <span style="color: white">tesutesu</span></div>
</div>
</div>

iPhone 等では1カラムになるように CSS で調整してみました。

@media (max-width: 767px) {
.comemo-column2 > div {
width:98% !important;
overflow:visible !important;
}
.comemo-column2 > div >  div {
width:98% !important;
margin-bottom:10px !important;
padding-bottom:10px !important;
}
.comemo-column2-sub {
display:none;
}
}

fgsdgsdfg

参考にした記事によると、記事の中にリンクをつけたり、IE で印刷したりするときに問題があるようですが、一般的に使う分には特に問題ないような気が個人的にはします。

 

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中

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