<!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. Octave及其工具包的安装

    Octave的安装: http://blog.sina.com.cn/s/blog_1358485f70102wmpa.html http://www.gnu.org/software/octave/ ...

  2. Python学习笔记（九）—— 函数

    一.函数调用: 1.python内部函数查询:http://docs.python.org/3/library/functions.html#abs 2.注意调用函数的参数个数和类型. 3.函数名其实 ...

  3. C#编写的服务程序启动服务时报错误1053

    Application.StartupPath 已知解决方案一:        读写文件路径的问题 用 $"{Application.StartupPath}\\config.txt&quo ...

  4. Git 分支（分布式版本控制系统）

    前言 几乎所有的版本控制系统都以某种形式支持分支.使用分支意味着你可以把你的工作从开发主线上分离开来,以免影响开发主线.在很多版本控制系统中,这是一个略微低效的过程--常常需要完全创建一个源代码目录的 ...

  5. Mac OS下Android Studio的Java not found问题，androidfound

    Android Studio正式版已经发布一段时间了,使用Mac版的Android Studio可能与遇到Java not found:Android Studio was unable to fin ...

  6. Python使用matplotlib模块绘制多条折线图、散点图

    用matplotlib模块 #!usr/bin/env python #encoding:utf-8 ''' __Author__:沂水寒城 功能:折线图.散点图测试 ''' import rando ...

  7. openkm安装过程

    # java -jar /software/OKMInstaller.jar Running in Linux: 0.9.1-CE (build: 445bef5) Linux distro: rhe ...

  8. Android MediaPlayer和VideoView的使用

          MediaPlayer MediaPlayer类是Androd多媒体框架中的一个重要组件,通过该类,我们可以以最小的步骤来获取,解码和播放音视频.它支持三种不同的媒体来源: 本地资源 内部 ...

  9. window.location.href 与 window.loaction.replace区别

    window.location.href和window.location.replace的区别 1.window.location.href=“url”:改变url地址: 2.window.locat ...

  10. [转]Java加密算法

    如基本的单向加密算法: BASE64 严格地说,属于编码格式,而非加密算法 MD5(Message Digest algorithm 5,信息摘要算法) SHA(Secure Hash Algorit ...