图片与文字的对齐方式

Posted 2020-08-02 胡辣辣

 

html代码：

 

　　　　　　　　<div class="content_con">
                <p><img src="images/land_main05.png" alt=""></p>
                <div class="con">
                    <span class="item">项目名称</span>
                    <span class="item_con">
                        项目说明项目说明项目说明项目说明项目说明项目说明项目说明
                        目说明项目说明项目说明项目说明项目说明项目说明项目说明
                    </span>
                    <span class="item_stats">状态：成功</span>
                    <span class="item_stats cur">进程：<a href="#">1条</a></span>
                </div>
                <div class="con_right">
                    <span class="gongxian">贡献</span>
                    <p>付款5元<span>2015.9.9</span></p>
                    <p>付款3元<span>2015.4.6</span></p>
                </div>
            </div>

 

　　css样式：

.content_con{
    margin:0px 20px;
    padding:10px 0;
    border-bottom:1px solid #e7e7e7;
    float: left;
}
.content_con>p{
    display: inline-block;
    float: left;
}
.content_con>p>img{
    vertical-align: text-top;
}
.con{
    display: inline-block;
    vertical-align: text-top;
    float: left;
    margin:0 20px;
}
.con>span{
    display: block;
    width:390px;
}
.con>.item{
    font-size:16px;
    font-family:"黑体";
    font-weight:700;
    margin-bottom:20px;
}
.con>.item_con{
    font-size:14px;
    font-family:"黑体";
    margin-bottom:20px;
}
.con>.item_stats{
    font-size:12px;
    font-family:"黑体";
}
.cur>a{
    cursor:pointer;
    color:#388ebb;
    text-decoration: none;
}

.con_right{
    float: left;
    width:198px;
    height:150px;
    background-color: #f7f7f7;
}
.con_right .gongxian{
    text-align:center;
    display: inline-block;
    width:198px;
    line-height:40px;
    font-size:16px;
    font-family:"黑体";
    font-weight:bold;
}
.con_right>p{
    padding:10px 0px;
    margin:0 20px;
    border-bottom:1px solid #e7e7e7;
    font-size:14px;
    font-family:"黑体";
}
.con_right>p>span{
    float: right;
}

 第二个

 

html：

 

 

<div class="footer">
    <div class="footer_con">
        <img src="images/land_footer01.png" alt="">
        <div>
        <p>热线电话：400-000-6060   官方微信：abcdefg   官方微博：abcdefg</p>
        <p>友情链接：中国老年产业大数据网  |  中国老年产业大数据网  |  中国老年产业大数据网  |  中国老年产业大数据网  |  中国老年产业大数据网</p>
        <p>版权所有：天津市为你实现梦想的网络公司 津ICP备案00000000号</p>
        </div>
    </div>
</div>

 

 

css：

.footer{
    border-top:10px solid #ccc;
    border-bottom:1px solid #e7e7e7;
    height:135px;
}
.footer .footer_con{
    width:1200px;
    margin:0 auto;
    
}
.footer_con>img{
    vertical-align: middle;
    margin:30px 0;
}
.footer_con>div{
    display: inline-block;
    vertical-align: middle;
    overflow: auto;
    font-size:14px;
    font-family:"黑体";
    color:#e7e7e7;
    margin-left:40px;
}

 

理解：