方法一:(推荐)

<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. 【刷题】LOJ 6225 「网络流 24 题」火星探险问题

    题目描述 火星探险队的登陆舱将在火星表面着陆,登陆舱内有多部障碍物探测车. 登陆舱着陆后,探测车将离开登陆舱向先期到达的传送器方向移动. 探测车在移动中还必须采集岩石标本. 每一块岩石标本由最先遇到它 ...

  2. 【题解】 Test 买水的ACX(套路)

    题目描述: ACX在××信竞组学会信息竞赛,但是他的同学都很巨,于是要他去买水,结果来到某个买水的商店(奇奇怪怪的商店). 一天,ACX买了 N 个容量可以认为是无限大的瓶子,初始时每个瓶子里有 1  ...

  3. 自定义Kettle数据库插件

    项目需要实现使用Kettle向神通数据库中写入数据,Kettle官方标准的数据库插件里面并没有对神通数据库的支持,因此需要自己写一个数据库插件.下面我们开始写一个数据库插件 1.在eclipse中创建 ...

  4. 【BZOJ1970】[AHOI2005]矿藏编码(模拟)

    [BZOJ1970][AHOI2005]矿藏编码(模拟) 题面 BZOJ 洛谷 题解 随便写个高精度模拟一下就完了. #include<iostream> #include<cstd ...

  5. bzoj3612 平衡 (dp)

    设f[i][j]为把i拆成j个不重复的.大于0小于等于N的数的方案数 我们考虑一个方案是怎么来的:(初始状态是f[0][0]=1) 如果这个方案里有1,那它是先把原来的状态的每个数加1.然后再增加一个 ...

  6. SSO系统的实现

    当一个网站系统比较大型的时候,我们通常采用面向服务的编程,采用分布式的编程.各个子系统共同来实现一个大的系统,这时候登录注册功能的实现也面临着一些问题. 一.WHAT? SSO是什么? sso是单点登 ...

  7. JS中的继承链

    我们首先定义一个构造函数Person,然后定义一个对象p,JS代码如下: function Person(name) { this.name = name; } var p = new Person( ...

  8. Python远程连接模块-Telnet

    Python远程连接模块-Telnet 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 虽然现在主流的python版本还是2.7,相信2020年python程序员都会偏向Python ...

  9. np.linespace使用方法

    np.linespace用法 觉得有用的话,欢迎一起讨论相互学习~Follow Me 生成指定范围内指定个数的一维数组 def linspace(start, stop, num=50, endpoi ...

  10. 考研:操作系统:进程同步—信号量实现同步互斥(PV操作)

    进程互斥的硬件实现方法