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>