精华内容
下载资源
问答
  • 主要为大家介绍了CSS实现左图右文混排布局的方法,涉及css图文混排布局的相关技巧,非常简单实用,需要的朋友可以参考下
  • 图文混排

    2019-02-23 11:18:12
    图文混排 今天我们来了解一下图文混排,首先我们来了解一下基本的知识。 //media-left(right) 图片的区域 在左边显示(右边) //media-body 内容区域 //media-heading 内容区域里的标题 //media-middle 图片居中 //...

    图文混排

    今天我们来了解一下图文混排,首先我们来了解一下基本的知识。

    //media-left(right) 图片的区域 在左边显示(右边)
    //media-body 内容区域
    //media-heading 内容区域里的标题
    //media-middle 图片居中
    //media-bottom 图片居下
    

    接下来我们分别来看一下效果图。

    图片居左

    7861972-5c493c1f1a897a15.png
    图片居左.png

    代码其实也非常简单!

    <div class="media">
               <div class="media-left">
                   <a href="#"><img src="img/1.jpg" alt="1" class="media-object" width="100" /></a>
               </div>
               <div class="media-body">
                   <h4 class="media-heading">上善若水</h4>
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam possimus atque ea id tempore esse culpa eveniet illum unde labore sed rerum voluptate blanditiis animi porro quisquam distinctio eum totam!</p>
               </div>
           </div>
    

    图片居右

    7861972-c5d74de483c0fe22.png
    图片居右.png

    接下来我们来看一下代码!

    <div class="media">
                <div class="media-body">
                    <h4 class="media-heading">上善若水</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam possimus atque ea id tempore esse culpa eveniet illum unde labore sed rerum voluptate blanditiis animi porro quisquam distinctio eum totam!</p>
                </div>
                <div class="media-right">
                    <a href="#"><img src="img/1.jpg" alt="1" class="media-object" width="100" /></a>
                </div>
            </div>
    

    图片居两端

    7861972-048be356dcf4e096.png
    图片居两端.png

    接下来我们来看一下代码!

    <div class="media">
                <div class="media-left media-middle">
                    <a href="#"><img src="img/1.jpg" alt="1" class="media-object" width="100" /></a>
                </div>
                <div class="media-body">
                    <h4 class="media-heading">上善若水</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam possimus atque ea id tempore esse culpa eveniet illum unde labore sed rerum voluptate blanditiis animi porro quisquam distinctio eum totam!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam possimus atque ea id tempore esse culpa eveniet illum unde labore sed rerum voluptate blanditiis animi porro quisquam distinctio eum totam!</p>
                </div>
                <div class="media-right">
                    <a href="#"><img src="img/1.jpg" alt="1" class="media-object" width="100" /></a>
                </div>
            </div>
    

    是不是觉得很简单呐!最后把所有的代码放上。

    <!DOCTYPE html>
    <html>
    
       <head>
           <meta charset="UTF-8">
           <meta http-equiv="X-UA-Compatible" content="IE=edge">
           <meta name="viewport" content="width=device-width, initial-scale=1">
           <title>媒体</title>
           <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
           <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
           <script type="text/javascript" src="js/bootstrap.min.js"></script>
           <style>
               .media {
                   padding: 30px;
               }
           </style>
       </head>
    
       <body>
           <div class="media">
               <div class="media-left">
                   <a href="#"><img src="img/1.jpg" alt="1" class="media-object" width="100" /></a>
               </div>
               <div class="media-body">
                   <h4 class="media-heading">上善若水</h4>
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam possimus atque ea id tempore esse culpa eveniet illum unde labore sed rerum voluptate blanditiis animi porro quisquam distinctio eum totam!</p>
               </div>
           </div>
           <div class="media">
               <div class="media-body">
                   <h4 class="media-heading">上善若水</h4>
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam possimus atque ea id tempore esse culpa eveniet illum unde labore sed rerum voluptate blanditiis animi porro quisquam distinctio eum totam!</p>
               </div>
               <div class="media-right">
                   <a href="#"><img src="img/1.jpg" alt="1" class="media-object" width="100" /></a>
               </div>
           </div>
           <div class="media">
               <div class="media-left media-middle">
                   <a href="#"><img src="img/1.jpg" alt="1" class="media-object" width="100" /></a>
               </div>
               <div class="media-body">
                   <h4 class="media-heading">上善若水</h4>
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam possimus atque ea id tempore esse culpa eveniet illum unde labore sed rerum voluptate blanditiis animi porro quisquam distinctio eum totam!</p>
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam possimus atque ea id tempore esse culpa eveniet illum unde labore sed rerum voluptate blanditiis animi porro quisquam distinctio eum totam!</p>
               </div>
               <div class="media-right">
                   <a href="#"><img src="img/1.jpg" alt="1" class="media-object" width="100" /></a>
               </div>
           </div>
       </body>
    
    </html>
    

    愿你三冬暖,愿你春不寒,愿你天黑有灯,下雨有伞。


    7861972-3146e311d48f46c7.jpg
    小晴天
    展开全文
  • 图文混排* {margin:0;padding:0;}body {background:#fff;}#wrap {width:502px;margin:10px auto 0 auto;}#wrap dl {width:480px;margin-bottom:8px;padding:8px;border:1px solid #ddd;}#wrap dl dt {float:right;...
    图文混排

    * {

    margin:0;

    padding:0;

    }

    body {

    background:#fff;

    }

    #wrap {

    width:502px;

    margin:10px auto 0 auto;

    }

    #wrap dl {

    width:480px;

    margin-bottom:8px;

    padding:8px;

    border:1px solid #ddd;

    }

    #wrap dl dt {

    float:right;

    width:366px;

    height:22px;

    }

    #wrap dl dt a {

    font-size:13px;

    font-weight:800;

    color:#06c;

    text-decoration:none;

    }

    #wrap dl dt a:hover {

    text-decoration:underline;

    }

    #wrap dl dd.pic {

    float:left;

    }

    #wrap dl dd.pic a {

    display:block;

    border:1px solid #ddd;

    }

    #wrap dl dd.pic a img {

    width:100px;

    height:86px;

    margin:2px;

    border:0;

    }

    #wrap dl dd.pic a:hover {

    border:1px solid #999;

    }

    #wrap dl dd.text {

    float:right;

    width:366px;

    font-size:12px;

    line-height:19px;

    color:#666;

    text-indent:2em;

    }

    #wrap dl dd.links {

    float:right;

    width:366px;

    margin-top:-6px;

    text-align:right;

    }

    #wrap dl dd.links a {

    font-size:12px;

    line-height:15px;

    color:#06c;

    text-decoration:none;

    }

    #wrap dl dd.links a:hover {

    text-decoration:underline;

    }

    #wrap dl:after {

    content:".";

    display:block;

    height:0;

    clear:both;

    visibility:hidden;

    }

    图文并排好方法
    1
           这个方法确实不错,排版也很漂亮,本CSS代码来自52CSS哦,再次推荐一下52CSS算是我的CSS启蒙老师,那时候不会就天天上去看资料,不会写就天天看CSS样式表…
    图文并排好方法
    1
           这个方法确实不错,排版也很漂亮,本CSS代码来自52CSS哦,再次推荐一下52CSS算是我的CSS启蒙老师,那时候不会就天天上去看资料,不会写就天天看CSS样式表…
    图文并排好方法
    1
           这个方法确实不错,排版也很漂亮,本CSS代码来自52CSS哦,再次推荐一下52CSS算是我的CSS启蒙老师,那时候不会就天天上去看资料,不会写就天天看CSS样式表…
    图文并排好方法
    1
           这个方法确实不错,排版也很漂亮,本CSS代码来自52CSS哦,再次推荐一下52CSS算是我的CSS启蒙老师,那时候不会就天天上去看资料,不会写就天天看CSS样式表…

    实例图:

    28018965_1.jpg

    展开全文
  • 用CSS实现HTML图文混排

    2007-02-07 17:20:00
    但对于动态的网页,图文混排的格式并不是一成不变的所以要想动态的生成表格来实现图文混排是非常困难的。 在CSS中有二个的属性可以用来实现图文混排。而且可以相对比较方便的实与动态内容相联系,在此我做以简单...

    在网页中经常需要文字环绕图片,或文字与图片分开来排列,目前常用的方法是使用表格来定位文字和图片以此来实现 。但对于动态的网页,图文混排的格式并不是一成不变的所以要想动态的生成表格来实现图文混排是非常困难的。

        在CSS中有二个的属性可以用来实现图文混排。而且可以相对比较方便的实与动态内容相联系,在此我做以简单简绍:

    1. float 设定浮动性质(多用于文绕图的情形)

    支 持:IE4、NC4
    适 用:区块元素或图形
    可能值: left 元素靠左,文字围绕其右 right 元素靠右,文字围绕其左 none 以预设的方法显示预设值:none
    继承性:无

    一般范例:DIV { float : right }
    同轴范例:<DIV style="float:right">
     2.clear 设定清除性质(设定是否允许浮动元素之存在)
    支 持:IE4
    适 用:区块元素或图形
    可能值: both 若两边有浮动元素,则该元素移至浮动元素下方 left 若左边有浮动元素,则该元素移至浮动元素下方 right 若右边有浮动元素,则该元素移至浮动元素下方 none 以预设的方法显示预设值:none
    继承性:无

    一般范例:DIV { clear : right }
    同轴范例:<DIV style="clear:right">
     
    利用上述二个CSS属性我们可以很方便的实现文字环绕图片的功能。
    左环绕:<div style="float:left; clear: both;" align="center"><img src=200461813238884.jpg width="600" height="400" alt="1234"><br/>
    图像标题</div>
    右环绕:<div style="float:right; clear: both;" align="center"><img src="20.gif" width="176" height="141"><br/>
    图像标题</div>
    独占一行:<div style="float:none; clear: both;" align="center"><img src="v8game2.jpg" width="400" height="300"><br/>
    图像标题</div>

    转载于:https://www.cnblogs.com/chinapcc/archive/2007/02/07/643803.html

    展开全文
  • 代码: < RichTextBox CaretBrush ="#fff" Background ="Transparent" BorderThickness ="0" > < FlowDocument FontSize ...转载于:https://www.cnblogs.com/s0611163/p/11354005.html

    代码:

    <RichTextBox CaretBrush="#fff" Background="Transparent" BorderThickness="0">
        <FlowDocument FontSize="16" Foreground="#fff">
            <Paragraph LineHeight="22">
                <Run Text="{Binding Name}"></Run>
                <Image Height="16" Width="32" Stretch="Fill" Source="/SunCreate.Vipf.Client.Resources;component/Image/MainPage/重要.png" />
            </Paragraph>
        </FlowDocument>
    </RichTextBox>
    View Code

    效果图:

     

    转载于:https://www.cnblogs.com/s0611163/p/11354005.html

    展开全文
  • 我们从一个带有动画效果的垂直列表开始,接着是一个图文混排的例子,然后是一个只有图片的list例子跟一个水平菜单的例子,最后是一个以放大数字开头的列表。对于初学者而言这里可以学到很多东西,对于熟手,直接拿来...
  • Bootstrap媒体对象

    2019-09-08 09:37:08
    前面的话 在Web页面或者说移动页面制作中,常常看到图文混排效果,图片居左(或居),内容居(或居左)排列。常常把这样的效果称为媒体对象。可以说它是一种抽象的样式,可以用来构建不同类型的组件。本...
  • HTML图像标签特点及相关属性介绍,在HTML中图像由<img>标签定义。通过使用<img>标签可以在文档中显示图像。主要涉及到alt属性、宽度和高度属性、表框属性...
  • HTML网页中任何元素的实现都要依靠HTML标签,要想在网页中显示图像就需要使用图像标签,接下来将详细介绍图像标签以及和它相关的属性。图像标签的基本语法格式如下。 <img src="图像URL" /> 在上面的语法中,...
  • HTML5学习笔记

    2019-12-29 16:17:05
    以前学习的HTML5笔记 今天翻到了 给大家分享一下 <!doctype html>//声明文档类型; <html>//网页的文档标签,双标签 <head> <meta charset="UTF-8">定义字符编码格式 charset属性定义编码...
  • 这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。 媒体对象轻量标记、易于扩展的...
  • <zz>latex中图片和文字并列排放

    万次阅读 2012-10-19 18:34:54
    这篇文章中介绍了使用minipage的方式混排图片和文字,达到图片在右侧,文字在左侧的效果。 注意minipage可以当做一个page来使用,它独立成为一个单元,里面可以添加figure, tabular, equation, text等资源。 ...
  • 如果存在左图右文,那么我们单纯给父级设置line-height=父级高度; 这样只会让文字居中,不能让图片居中, 原因 :图片和文字的对齐方式是以底边为对齐的; 如果我们想要图片也能垂直居中就需要让图片和文字以...
  • 怎样编写CSS

    千次阅读 2007-07-10 15:34:00
    比如Windows下的记事本和写字板、专门的HTML文本编辑工具(Frontpage、Ultraedit等),都可以用来编辑CSS文档。 那么您可能会问,独立编辑好的CSS文档怎样加入到HTML文档中呢?其实在第一章中的例子里已经介绍了两种...
  • 【转载】怎样编写CSS?

    千次阅读 2006-11-09 09:32:00
    从上面的例子中,我们可以看到CSS的语句是内嵌在HTML文档内的。所以,编写CSS的方法和编写HTML文档的方法是一样的。 您可以用任何一种文本编辑工具来编写。比如Windows下的记事本和写字板、专门的HTML文本编辑工具...
  • 前端制作入门知识

    2016-08-02 18:09:00
    原文链接:http://caibaojian.com/frontend-base.html 前端制作入门知识 A-A+ 前端博客•2015-08-18•前端开发•CSS|前端基础•2020View1 文章目录 一.名词解释 二.文本格式化 三.表单表格 ...
  • Web总结

    2015-10-11 23:36:00
    Web总结 学习web前端理论基础必然是要过关的,这里我总结了一下比较基础的常用理论,还是...两个容器或碎片之间的上、下、左、的空白距离 3.继承 元素可以从其父级元素中获得一些可为自己使用的属性或值。 ...
  • 本文转载至http://www.cnblogs.com/huayuan320/p/5777610.html 【385】【scrollView不接受点击事件,是因为事件传递失败】 // // MyScrollView.m // Created by beyond on 15/6/6. // Copyright (c) 2015...
  • 【335】【label图文混排CBEmotionView】【 使用core text 和 core graphics 实现的文字与表情图片的并排绘制】 【334】【Localizable.strings】 // // Localizable.strings 本地资源文件 // // Created ...
  • 天宇联Android开发手册 ttyu.common通用类   方法 说明 GetFunctionValue(stringdataMember) 获取方法的值 RunFunctions(stringformula) ...GetKeyValue(thisstring str,stri
  • 1: 从向左,2: 从上向下,3:从下向上, 4: 放大缩小 R.anim.zoomin, R.anim.zoomout 5: 淡入淡出 R.anim.alphain, R.anim.alphaout fromXScale CGFLoat X缩放  scale  ...
  • iOS开发遇到的问题

    千次阅读 2016-01-15 19:07:28
    【385】【scrollView不接受点击事件,是因为事件传递失败】 // // MyScrollView.m // Created by beyond on 15/6/6. // Copyright (c) 2015年 beyond.com All rights reserved. ...#import "My
  • iOS开发中遇到的一些问题及解决方案【转载】 2015-12-29 【385】【scrollView不接受点击事件,是因为事件传递失败】 // // MyScrollView.m // Created by beyond on 15/6/6. // Copyright (c) 2015...// 不...

空空如也

空空如也

1 2
收藏数 33
精华内容 13
关键字:

html图文混排左图右文