方法一:(推荐)

<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. java基础知识疑难点

    1.“static”关键字是什么意思?Java中是否可以覆盖(override)一个private或者是static的方法? “static”关键字表明一个成员变量或者是成员方法可以在没有所属的类的实 ...

  2. C++时间标准库时间time

    转自:http://www.cnblogs.com/yukaizhao/archive/2011/04/29/cpp_time_system_time.html (玉开) C++标准库中的时间需要引用 ...

  3. ThinkPHP5项目目录

    ThinkPHP5安装后(或者下载后的压缩文件解压后)可以看到下面的目录结构: tp5├─application     应用目录 ├─extend          扩展类库目录(可定义) ├─pu ...

  4. DP(动态规划)

    http://www.hawstein.com/posts/dp-novice-to-advanced.html https://www.topcoder.com/community/data-sci ...

  5. Scrapy爬虫框架教程(四)-- 抓取AJAX异步加载网页

    欢迎关注博主主页,学习python视频资源,还有大量免费python经典文章 sklearn实战-乳腺癌细胞数据挖掘 https://study.163.com/course/introduction ...

  6. MySQL数据库以及表的管理

    MySQL数据库以及表的管理 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 今天我们探讨的话题就是如何使用MySQL做开发,我们运维的主要工作不是去开发SQL的,但尽管如此,我们有 ...

  7. json字符串转java对象

    今天遇到一个问题,前端ajax获取到一个javaBean对象,好多方法发ajax请求需要把这个对象再传到后端,后端再根据这个对象进行操作(之前计划传递id,但发现传递id的话,后端多个方法都需要根据i ...

  8. Python字符串颜色输出

    \033[1;31;40m      # 1是显示方式(可选),31是字体颜色,40m 是字体背景颜色: \033[0m           # 恢复终端默认颜色,即取消颜色设置: # cat col ...

  9. 【转】VTL-vm模板的变量用法

    http://www.cnblogs.com/zengxlf/archive/2009/05/06/1451004.html 加载foot模块页 #parse("foot.vm") ...

  10. Kali社会工程学攻击--powershell 攻击(无视防火墙)

    1.打开setoolkit 输入我们反弹shell的地址与端口 2.修改我的shellcode 3.攻击成功