bootstrap-图文混排 media

最新推荐文章于 2023-10-17 11:53:00 发布

weixin_34356138

最新推荐文章于 2023-10-17 11:53:00 发布

阅读量719

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tenWood/p/6142988.html

本文展示了一种使用特定类实现图文混排的方法，包括图片在左、右两侧的布局方式，以及如何在一个区块内同时放置两张图片。此外，还介绍了如何通过嵌套实现类似留言引用的效果。

<!-- 
    media                              图文混排
    media-left(right)                图片的区域 在左边显示(右边)
    media-body                        内容区域
    media-heading                    内容区域里的标题
    media-middle                    图片居中
    media-bottom                    图片居下
-->
<div class="container">
    <div class="row" style="width:500px">
        <div class="media">
            <a href="#" class="media-left media-middle media-bottom">
                <img src="user_photo.png" width="100"/>
            </a>
            <div class="media-body">
                <h4 class="media-heading">java学院</h4>
                <p>javajavajavajavajavajavajavajavajava
                    javajavajavajavajavajavajavajavajava
                </p>
            </div>
        </div>
    </div>
    <!-- 图片在右边显示-->
    <div class="row" style="width:500px">
        <div class="media">
            <div class="media-body">
                <h4 class="media-heading">java学院</h4>
                <p>javajavajavajavajavajavajavajavajava
                    javajavajavajavajavajavajavajavajava
                </p>
            </div>
            <a href="#" class="media-right">
                <img src="user_photo.png" width="100"/>
            </a>
        </div>
    </div>

    <!-- 左右都有图片-->
    <div class="row" style="width:500px">
        <div class="media">
            <a href="#" class="media-left">
                <img src="user_photo.png" width="100"/>
            </a>
            <div class="media-body">
                <h4 class="media-heading">java学院</h4>
                <p>javajavajavajavajavajavajavajavajava
                    javajavajavajavajavajavajavajavajava
                </p>
            </div>
            <a href="#" class="media-right">
                <img src="user_photo.png" width="100"/>
            </a>
        </div>
    </div>

    <!-- 类似留言引用 右侧内容又嵌套了一个media-->
    <div class="row" style="width:500px">
        <div class="media">
            <a href="#" class="media-left">
                <img src="user_photo.png" width="100"/>
            </a>
            <div class="media-body">
                <h4 class="media-heading">java学院</h4>
                <p>javajavajavajavajavajavajavajavajava
                    javajavajavajavajavajavajavajavajava
                </p>
                <div class="media">
                    <a href="#" class="media-left">
                        <img src="user_photo.png" width="100"/>
                    </a>
                    <div class="media-body">
                        <h4 class="media-heading">java学院</h4>
                        <p>javajavajavajavajavajavajavajavajava
                            javajavajavajavajavajavajavajavajava
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>