方法一:(推荐)

<div style="float:left;margin-right:20px">
  <img src="/source/s_1701200858491908006.jpg" width="180" height="100" />
</div>
<div>
  <div>图片名称:奥迪R8</div>
</div>

方法二:

<div style="display:table-cell">
  <img src="/source/s_1701200858491908006.jpg" width="180" height="100" />
</div>
<div style="display:table-cell;vertical-align:top">
  <div>图片名称:奥迪R8</div>
</div>

方法三:(推荐)

<div style="display:inline">
  <img src="/source/s_1701200858491908006.jpg" width="180" height="100" />
</div>
<div style="display:inline;vertical-align:top">
  <div>图片名称:奥迪R8</div>
</div>

效果图:

CSS------如何让大小不一样的div顶部对齐的更多相关文章

  1. css让不同大小的图片适应div的大小,且不变形。

    做成背景图片 单个 .imgdiv { width: 100px; // 你要的正方形 height: 100px; // 你要的正方形 background-image: url(/your/ima ...

  2. CSS------如何让大小不一样的div中心对齐

    如图: 代码: <div style = 'display:inline;color:green;font-size:30px;font-weight:bold'>¥1666.00< ...

  3. css,使两个在同一行内的display:inline-block的div顶部对齐。

    两个都加上:vertical-align:top;

  4. css中的大小、定位、轮廓相关属性

    css中的大小.定位.轮廓相关属性 1.通过height.width属性控制组件大小 height:高度,可以设置任何有效的距离值: width:宽度,可以设置任何有效的属性值: max-height ...

  5. 使用css实现任意大小,任意方向, 任意角度的箭头

    使用css实现任意大小,任意方向, 任意角度的箭头 网页开发中,经常会使用到 下拉箭头,右侧箭头 这样的箭头. 一般用css来实现: { display: inline-block; margin: ...

  6. jsp学习---css基础知识学习,float,position,padding,div,margin

    1.常用页面布局 效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  7. CSS技巧!像table一样布局div

    摘自:http://www.cnblogs.com/hnyei/archive/2011/09/19/2181442.html 许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个 ...

  8. 纯CSS实现点击事件展现隐藏div菜单列表/元素切换

    在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错:当然还有使用纯JS实现的小代码段.我这里整理了纯CSS实现方式,给需要的人和给自己 ...

  9. css自适应浏览器大小

    css自适应浏览器大小 1.屏幕 > 900px :显示3列 2.450px < 屏幕 < 900px :显示2列 3.屏幕 < 450px :显示1列 <!DOCTYP ...

随机推荐

  1. 【bzoj2001】 Hnoi2010—City 城市建设

    http://www.lydsy.com/JudgeOnline/problem.php?id=2001 (题目链接) 题意 给出一张无向图,$m$组操作,每次修改一条边的权值,对于每次操作输出修改之 ...

  2. POJ 2135 Farm Tour (网络流,最小费用最大流)

    POJ 2135 Farm Tour (网络流,最小费用最大流) Description When FJ's friends visit him on the farm, he likes to sh ...

  3. string::replace

    #include <string> #include <cctype> #include <algorithm> #include <iostream> ...

  4. SQL Server - 开窗函数

    -- 开窗函数:在结果集的基础上进一步处理(聚合操作) SELECT * FROM dbo.Student S# Sname Sage Ssex ---------- ---------- ----- ...

  5. 前端必须掌握的30个CSS选择器

    也许你已经学会了CSS的三个简单常用的选择器:#ID,.class,标签选择器,可是这些就足够了吗?随着CSS3的到来,作为前端开发者需要掌握下面三十个基本的选择器,这样才可以在平时开发中得心用手. ...

  6. HDU 3537 基础翻硬币模型 Mock Turtles 向NIM转化

    翻硬币游戏,任意选3个,最右边的一个必须是正面.不能操作者败. 基本模型..不太可能自己推 还是老实记下来吧..对于单个硬币的SG值为2x或2x+1,当该硬币的位置x,其二进制1的个数为偶数时,sg= ...

  7. 安装mongodb以及设置为windows服务 详细步骤

    我的win7 32的,注意版本要正确! 一.下载mongodb压缩包:mongodb-win32-i386-2.6.9.zip() 二.在D盘新建文件夹mongodb,将压缩我的解压文件放进去(有一个 ...

  8. html5 canvas显示文字(写上5个字,纪念我那刚刚逝去的爱情)

    <script type="text/javascript"> window.addEventListener('load',eventWindowLoaded,fal ...

  9. gdb初步窥探

    本文是通过学习左耳朵皓帝的文章,详见:http://blog.csdn.net/haoel 1.使用gdb gdb主要是用来调试c和c++程序,首先在编译前我们先把调试信息加到可执行程序当中,使用参数 ...

  10. asp.net C#母版页和内容页事件排版加载顺序生命周期

    asp.net C#母版页和内容页事件排版加载顺序生命周期 关于ASP页面Page_Load发生在事件之前而导致的问题已经喜闻乐见,对于问题的解释也很全面,但是如何解决问题则较少有人说明,我就再 简单 ...