<!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. 【LeetCode】230. Kth Smallest Element in a BST (2 solutions)

    Kth Smallest Element in a BST Given a binary search tree, write a function kthSmallest to find the k ...

  2. linux达人养成计划学习笔记（五）—— 关机和重启命令

    一.shutdown 1.格式: shutdown [选项] 时间(now) 选项: -c: 取消前一个关机命令 -h: 关机 -r: 重启 2.程序放入后台执行: shutdown -r 时间 &a ...

  3. 【Oracle 】pctfree和pctused详解

    一.建立表时候,注意PCTFREE参数的作用 PCTFREE:为一个块保留的空间百分比,表示数据块在什么情况下可以被insert,默认是10,表示当数据块的可用空间低于10%后,就不可以被insert ...

  4. 【Oracle】Oracle基本数据类型总结

    ORACLE基本数据类型(亦叫内置数据类型 built-in datatypes)可以按类型分为:字符串类型.数字类型.日期类型.LOB类型.LONG RAW& RAW类型.ROWID &am ...

  5. 【javascript】javascript中function(){},function(){}(),new function(){},new Function()

    和java比起来,javascript真的是松散的无以复加,不过这也让我们在无聊之余,有精力去探讨一些复杂的应用,从而在开发之路上,获得一些新的想法. javascript中的类的构造 javascr ...

  6. 【java】详解java中的注解（Annotation）

    目录结构: contents structure [+] 什么是注解 为什么要使用注解 基本语法 4种基本元注解 重复注解 使用注解 运行时处理的注解 编译时处理的注解 1.什么是注解 用一个词就可以 ...

  7. sqlyog v12.09 注册码

    1.小巧的自动完成.2.HTTP/HTTPS和SSH通道.3.向导化的汇入工具包.4.结构化的同步,可以设定任务计划,按照特定的时间进行同步作业,并对同步数据进行校验.5.工作管理器.计划备份.以及通 ...

  8. Android的API版本和名称对应关系

    Android版本名和API Level关系全称 Android的版本 Android版本名称Code name Android的API level Android 1.0 (API level 1) ...

  9. android View未渲染时获得高度

    ViewTreeObserver vto = tv.getViewTreeObserver(); vto.addOnGlobalLayoutListener(new OnGlobalLayoutLis ...

  10. ekho安装及测试（中文文字转语音）

    1. 官网下载源码包 地址:http://www.eguidedog.net/ekho.php 2. 安装 xz -d ekho-7.5.tar.xz tar -xvf ekho-7.5.tar ap ...