码迷,mamicode.com
首页 > 其他好文 > 详细

图片与文字的对齐方式

时间:2016-07-01 16:02:42      阅读:111      评论:0      收藏:0      [点我收藏+]

标签:

 

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;
}

 

理解:

图片与文字的对齐方式

标签:

原文地址:http://www.cnblogs.com/socool-hu/p/5633132.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!