css技巧—图片配文字

一.头像+名称+介绍
这里写图片描述

这种一般在话题的开头或者评论的的开头比较常见

实现方式：

1，弹性盒布局（flex）,采用这种布局要考兼容性的问题：

css:

.header{
                display: flex;
                display: -webkit-flex;
                align-items:center;
            }
            .header_AuthorInfo .AuthorInfo{
                display: inline-block;
                padding: 5px;
            }

html：

 <div class="header">
                <div class="header_img">
                    <a href="#">
                        <img src="image/1.jpg" alt="" width="30" height="30"/>
                    </a>
                </div>
                <div class="header_AuthorInfo">
                    <div class="AuthorInfo AuthorInfo-name">
                        <span>王洋洋</span>
                    </div>
                    <div class="AuthorInfo AuthorInfo-detail">
                        <em>前端攻城狮</em>
                    </div>
                </div>
   </div>

2，采用浮动的方式，这种方式兼容性是最好的，写起来也简单。
css:

  .header>.header_img{
                float: left;
            }
            .header_AuthorInfo .AuthorInfo{
                display: inline-block;
                padding: 5px;
            }

二，图片+简介

这里写图片描述

这种布局方式一般出现在话题或者新闻标题处

实现方式：
css:

          .news{
                border:1px solid blanchedalmond
            }
            .news>.news_header{
                width:200px;
                height: 100px;
                float: left;
                padding-right:10px;
            }
            .news>.news_intro{
                height: 100px;

            }
            .news>.news_intro>p{
                padding: 0px;
            }
            .readMore{
                display: inline-block;
                color: #6495ED;
                text-decoration: none;
            }

html:

           <div class="news">
                <div class="news_header">
                    <img src="image/2.jpg" alt="" height="100px" width="200px"/>
                </div>
                <div class="news_intro">
                        <span id="news_intro">

                        </span>

                </div>
            </div>

这种实现方式一般都伴随着简介文字缩略，如果文字太长，文字区域的高度超过图片的高度，会出现文字包围图片的想象，这是往往会限制文字的长度，我在这里使用脚本实现的控制文字长度，个人感觉这种方式比较靠谱，可以丰富操作。
js:

    function addIntro(){
        var str = "打开后，发现IDEA并没有自动识别Maven项目，这时候，需要手动在IDEA右侧的Maven Projects栏（如果没显示Maven Projects栏，则依次A并没有自动识别Maven项目，这时候，需要手动在IDEA右侧的Maven Projects栏（如果没显示Maven Projects栏，则依次A并没有自动识别Maven项目，这时候，需要手动在IDEA右侧的Maven Projects栏（如果没显示Maven Projects栏，则依次A并没有自动识别Maven项目，这时候，需要手动在IDEA右侧的Maven Projects栏（如果没显示Maven Projects栏，则依次A并没有自动识别Maven项目，这时候，需要手动在IDEA右侧的Maven Projects栏（如果没显示Maven Projects栏，则依次在IDEA工具栏View=》Tool Windows=》Maven Projects中打开）中添加项目的pom.xml文件，这样IDEA就能识别了";
        if(str.length>200){
                str = str.slice(0,200)+"..."+"<a href='#' class='readMore'> 阅读更多<a>";
        }
        var obj = document.getElementById("news_intro");
        obj.innerHTML=str;
    }

今天暂时总结这两种，后面遇见比较新鲜的布局方式我再更新。

css技巧—图片配文字

猜你喜欢