<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.recipeStep li {
    display: block;
    margin: 0px 0px 35px;
}
.recipeStep li .recipeStep_img {
    width: 260px;
    display: inline-block;
    position: relative;
}
.recipeStep_img a {
    cursor: auto;
    width:100px;
    height:100px;
    background:red;
}
.recipeStep li .recipeStep_img img {
    width: 220px;
    height:100px;
    background:red;
}
img {
    border: 0px none;
    vertical-align: middle;
}
.recipeStep_num {
    width: 40px;
    height: 40px;
    background: none repeat scroll 0% 0% #E8E8E8;
    border: 1px solid #BCBCBC;
    border-radius: 20px;
    position: absolute;
    top: 50%;
    right: 10px;
    text-align: center;
    line-height: 40px;
    font-size: 30px;
    color: #BA2020;
    margin-top: -20px;
}
.recipeStep li .recipeStep_word {
    width: 370px;
    display: inline-block;
    vertical-align: middle;
    color: #666;
    font-size: 16px;
}
</style>
</head>

<body>
<div class="recipeStep">
   <ul>
      <li>
         <div class="recipeStep_img">
             <a href="javascript:void(0);" data-id="0">
               <img src="">
            </a>
             <div class="recipeStep_num">1</div>
         </div>
         <div class="recipeStep_word">准备好所有的食材。</div>
       </li>
       <li>
         <div class="recipeStep_img">
             <a href="javascript:void(0);" data-id="1">
               <img src="http://i3.meishichina.com/attachment/recipe/201111/18/p320_201111181304588.JPG">
             </a>
             <div class="recipeStep_num">2</div>
         </div>
         <div class="recipeStep_word">再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好。</div>
     </li>
    </ul>
  </div>
</body>
</html>

css样式实现左边的固定宽度和高度的图片或者div跟随右边高度不固定的文字或者div垂直居中（文字高度超过图片，图片跟随文字居中，反之文字跟随图片居中非table实现）的更多相关文章

  1. bootstrap 全局 CSS 样式

    http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...

  2. 【03】全局 CSS 样式

    全局 CSS 样式 设置全局 CSS 样式:基本的 HTML 元素均可以通过 class 设置样式并得到增强效果:还有先进的栅格系统. 概览 深入了解 Bootstrap 底层结构的关键部分,包括我们 ...

  3. ASP.NET中直接用C# 动态修改CSS样式

    ASP.NET中直接用C# 动态修改CSS样式  wonsoft (wonsoft@163.com) 使用JavaScript控制CSS样式有点麻烦,还是觉得直接使用C#操作更方便快捷,本文通过两个B ...

  4. php部分：网页中报表的打印，并用CSS样式控制打印的部分；

    网页中报表的打印,是通过调用window对象中的print()方法实现打印功能的: 调用浏览器本身的打印功能实现打印 <a href="#" onclick="wi ...

  5. 使用less函数实现不同背景的CSS样式

    今天在公司遇到一个比较特殊的需求,需要完成这样的布局,如下图: 每一个块的背景需要不同,而其他都是相同的,这时候就应该把背景提出来单独写成一个CSS样式类. 那么问题来了,有四个不同的背景需要写4个基 ...

  6. css 样式 记录

    /* Track */::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-bo ...

  7. 反爬虫破解系列-汽车之家利用css样式替换文字破解方法

    网站: 汽车之家:http://club.autohome.com.cn/ 以论坛为例 反爬虫措施: 在论坛发布的贴子正文中随机抽取某几个字使用span标签代替,标签内容位空,但css样式显示为所代替 ...

  8. CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  9. 获取jQuery对象的第N个DOM元素 && table常用css样式

    获取jQuery对象的第N个DOM元素 1.$(selector).get(N-1) 2.$(selector)[N-1] 注意:.index()方法返回的是一个数,相当于C#中的IndexOf() ...

随机推荐

  1. Python import容易犯的一个错误

    有时,我们需要手动添加一些依赖 b.py import sys sys.path.insert(0,"haha")#引用haha目录下的a文件 当使用时 import a impo ...

  2. 树莓派 SD卡镜像备份

    一.准备工作 1.已经配置启动的树莓派SD卡 2.Linux系统的pc 3.读卡器 二.修改SD卡文件 刚开始我先再win7下把SD卡接到pc上,发现无法读取.用DISKGENIUS查看pc的磁盘状态 ...

  3. 有关于malloc申请内存和free内存释放

    malloc工作机制: malloc函数的实质体现在,它有一个将可用的内存块连接为一个长长的列表的所谓空闲链表(堆内存).调用malloc函数时,它沿连接表寻找一个大到足以满足用户请求所需要的内存块. ...

  4. webpack window下配置的hello world

    峰回路转 一区九折 先看效果:(此效果是webpack执行完之后会生成build文件夹已经它下面的index.html,点击index.html就是下图的效果)

  5. 【MySQL】mysql中any，in，some，all的区别

    子查询就是指在一个select语句中嵌套另一个select语句. any,in,some,all分别是子查询关键词之一, any 可以与=.>.>=.<.<=.<> ...

  6. 【HTML】如何判断当前浏览器是否是IE

    HTML里: HTML代码中,在编写网页代码时,各种浏览器的兼容性是个必须考虑的问题,有些时候无法找到适合所有浏览器的写法,就只能写根据浏览器种类区别的代码,这时就要用到判断代码了.在HTML代码中, ...

  7. Hadoop学习：Map/Reduce初探与小Demo实现

    原文地址:https://blog.csdn.net/liyong199012/article/details/25423221 一.    概念知识介绍 Hadoop MapReduce是一个用于处 ...

  8. 【转载，整理】Linux性能监控

    一. 比较全的linux性能检测网站 1. 很好的网站,原文:http://os.51cto.com/art/201402/430050.htm 监测 cpu.内存.网络.IO等命令及工具   2.  ...

  9. Android后台处理最佳实践(Best Practices for Background Jobs)

    本课将告诉你如何通过后台加载来加速应用启动和降低应用耗电. 后台跑服务 除非你做了特殊指定,否则在应用中的大部分前台操作都是在一个特殊的UI线程里面进行的.这有可能会导致一些问题,因为长时间运行的操作 ...

  10. VS Code 中文注释显示乱码 解决方法

    将设置中的"files.autoGuessEncoding"项的值改为true即可. 1.文件 2.首选项 3.设置 4.搜索 "files.autoGuessEncod ...