画像とテキストの並列表示

画像とテキストの並列表示を実現するスクリプト。.outerWidth(true)を利用すれば、スタイリング(画像とテキスト間のmargin等)はCSSに記述できるし、スクリプトも単純にできるのではと思っている。


HTML


<div class="lyt-image image-parallel image-R">
<div class="text">
<!-- コンテンツ -->
</div><!-- /.text -->
<div class="image">
<!-- 画像 -->
</div><!-- /.image -->
</div><!-- /.lyt-image -->

JavaScript


window.jQuery && (function($) {
    $(function() {
        // 画像とテキストの並列表示
        $(".image-parallel").each(function () {
            var $container = $(this),
                $img,
                $text;

            // カラム取得
            $img = $container.find(".image");
            $text = $container.find(".text");

			// カラムの幅指定
            $img.css("width", $img.width() + "px");
            $text.css("width", ($container.width() - $img.outerWidth(true)) + "px");
        });
    });
}(jQuery));