方法一:(推荐)

<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. 自学Aruba1.2-WLAN一些基本常识802.11n速率计算方式、802.11n及802.11AC速率表

    点击返回:自学Aruba之路 自学Aruba1.2-WLAN一些基本常识802.11n速率计算方式.802.11n及802.11AC速率表 1. 802.11n速率计算方式 以802.11g的54M最 ...

  2. 【BZOJ1965】[AHOI2005]洗牌(数论)

    [BZOJ1965][AHOI2005]洗牌(数论) 题面 BZOJ 洛谷 题解 考虑反过来做这个洗牌的操作,假定当前牌是第\(l\)张. 因为之前洗的时候考虑了前一半和后一半,所以根据\(l\)的奇 ...

  3. 【Luogu P4149】[IOI2011]Race(点分治)

    自闭了几天后的我终于开始做题了..然后调了3h一道点分治板子题,调了一天一道IOI... 最后还是自己手造数据debug出来的... 这题一看:树上路径问题,已知路径长度求balabala,显然是点分 ...

  4. 解题:HNOI 2015 开店

    题面 根据树上距离的计算方法,可以先把答案化成$\sum dep_i+n*dep_u-\sum 2*dep[LCA(i,u)]$的形式,然后维护$\sum 2*dep[LCA(i,u)]$ 把妖怪们按 ...

  5. AIO + ByteBufferQueue + allocateDirect 终于可以与NIO的并发性能达到一致。

    看到这个标题,你可能会惊讶,相比NIO,AIO不就是为了在高并发的情况下代替NIO的吗? 是的,没错,但是在并发不高的情况下,AIO的性能表现很多时候还不如NIO. 在一台机子上用ab进行并发压力测试 ...

  6. RabbitMQ服务主机名更改导致消息队列无法连接

    RabbitMQ服务主机名更改导致消息队列无法连接 在多节点环境中,RabbitMQ服务使用一个独立节点部署.在此环境下,如果修改了RabbitMQ节点的主机名,则需要更新RabbitMQ用户才能保证 ...

  7. VBA:Excel使用SQL进行查询

    Sub Query() Dim Conn As Object, Rst As Object Dim strConn As String, strSQL As String Dim i As Integ ...

  8. 如何通过卡面标识区分SD卡的速度等级

    现在很多设备都可以插存储卡,而比较流行的就是SD(Secure Digital Memory Card)卡和Micro SD(原名TF,Trans-flash Card )卡,这两种卡主要就是尺寸不同 ...

  9. bzoj千题计划227:bzoj1486: [HNOI2009]最小圈

    http://www.lydsy.com/JudgeOnline/problem.php?id=1486 二分答案 dfs版spfa判负环 #include<queue> #include ...

  10. Linux命令(八)Linux系统信息相关命令

    top: