jQuery で、設定をを切り替えています。変更できる内容は以下のようにしています1) block 2) inline-block 3) inline-table 4) list-item 5) inline※ list-item を同時にテストする為、一番外側のブロックには ul を使用しています。
テキスト
テキスト(自動改行をさせる)テキスト(自動改行をさせる)
テキスト(自動改行をさせる)
テキスト
inline-table が扱いやすい ブロック内のテキストが自動改行されて複数行になった場合に、一番上の行に合わせてレイアウトされます。さらに、ブロックの高さより、テキストが多くなっても自動的にブロックの高さが調整されます。これは、そもそも float を指定するかわりの代替として使われるべきものです。 inline-block では、ブロックが単純に行の上に乗る形で上へ伸びます。また、ブロックの高さは固定で、テキストが多い場合ははみ出るので、ブロックによる背景色等の効果を期待できません、つまり、ブロック内のテキストの改行数によって 全体の見え方がかなり変化する事になります。 list-item は、標準のマーカーを使う場合はいいですが、画像を list-style-image で変更すると、画像のサイズによって、意図しないレイアウトになるようなので使わないほうがいいと思います。
<script type="text/javascript">
if ( window['loadjQuery'] !== true ) {
window['loadjQuery'] = true;
document.write("<"+"script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></"+"script>");
}
</script>
<script type="text/javascript">
$(function(){
$("#change_type").change(function(){
$("#jquery_test div")
.css({ "display": $(this).val() } );
});
});
</script>
<style type="text/css">
#jquery_test {
width: 550px;
border: dotted 1px #c0c0c0;
}
#jquery_test div {
display: block;
width: 100px;
height: 50px;
border: solid 1px #000000;
padding: 5px;
}
#jquery_test .next {
margin-left: 20px;
}
</style>
<ul id="jquery_test">
<select id="change_type">
<option>block</option>
<option>inline-block</option>
<option>inline-table</option>
<option>list-item</option>
<option>inline</option>
</select>
<hr>
テキスト
<div>
テキスト(自動改行をさせる)テキスト(自動改行をさせる)
</div>
<div class="next">テキスト(自動改行をさせる)
</div>
<div class="next">テキスト
</div>
</ul>
|
|
【HTML / CSSの最新記事】
- タイトルの背景画像を CSS でスクロールさせて雪を降らせ、after を使って画像で装飾する
- A 要素と CSS だけでボタンを表現する 『BUTTONS』
- BUTTON 要素と CSS だけでアイコンボタンを表現する 『BUTTONS』
- CENTER 要素内での position:absolute で、位置指定されていない場合の振る舞い
- INPUT type="number" の振る舞いをブラウザ間で調整する
- META 要素の viewport で content 内の区切り文字に ;(セミコロン) を使うと Google Chrome で警告が出ました。
- ブロックレベル要素内のブロックレベル要素を常に中央に表示する jQuery のデモ
- IE9 以降での完全な「データ URI」の利用 / WEBページにバイナリデータを埋め込む / data Protocol
- CSS で、white-space に pre-line を指定している PRE 要素内の ブラウザ毎の結果の違い
- TABLE要素を使わずに DIV 要素を使って横方向にエリアを配置する
- HTML : 画像を使ったボタンのバリエーション
- Picasa と list-style-image を使って、リストのマークをフォントサイズに合わせて拡大・縮小して利用する
- WEB フォントの記述方法の考察
- これがいい方法かどうかは解りませんが、直観的で解りやすい UL 要素内の LI 間の改行調整
- Google Chrome で IFRAME の frameborder="yes" が動作しないのですが(一般仕様はともかくとして)、よくよくブラウザ別に比べるとかなり違います。
- CSS3 の角丸を IE8以前でも使うには( ブログで使うには )
- CSS : display / vertical-align
