css+div布局 如何实现两张图片平行放置

很简单的一段代码,但不知为何我想让right中的图片放到middle的旁边,可总是无法实现(如图):
![![图片说明](https://img-ask.csdn.net/upload/201511/08/1446969070_249912.png)图片说明](https://img-ask.csdn.net/upload/201511/08/1446969140_87760.png)图片说明
就是如何将右下角的图片移到跟上一个图片平行的位置。

8个回答

第一个图片不要用p或者其它的块级元素包裹,或者设置一个float:left的css即可。

浏览器默认是流体布局,从上到下;需要认为设置为水平布局就可以了;第一个div设置为float:left;第二个div设置为float:right;

给你左边图片一个边框,右边图片一个边框,然后将右边图片float到左边就可以了。只要你控制住边框就能实现你想要的效果的

或者你做成一行两列的表格,在表格里面插入

你所提出的问题描述不是很清楚,可以把你的代码贴出来吗?

num1图片说明
num2图片说明
如果是块级元素包含快可以用下面的方法:将两个图片设置统一的浮动方向。

.img{ float: left; }
    <div>
        <div class ="img" ><img src="num1.png"/></div>
        <div class ="img" ><img src="num2.png" id="num2"/></div>
    </div>

你所提出的问题描述不是很清楚,可以把你的代码贴出来吗?

num1图片说明
num2图片说明
如果是块级元素包含快可以用下面的方法:将两个图片设置统一的浮动方向。

.img{ float: left; }
    <div>
        <div class ="img" ><img src="num1.png"/></div>
        <div class ="img" ><img src="num2.png" id="num2"/></div>
    </div>

让图片变成块状元素,之后设置float为left

2张图片直接放入div中就好了,div设置style="align:center",不需要浮动

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
css+div布局 如何实现两张图片平行放置
很简单的一段代码,但不知为何我想让right中的图片放到middle的旁边,可总是无法实现(如图):n![![![图片说明](https://img-ask.csdn.net/upload/201511/08/1446969070_249912.png)图片说明](https://img-ask.csdn.net/upload/201511/08/1446969140_87760.png)图片说明](https://img-ask.csdn.net/upload/201511/08/1446969038_236052.png)n就是如何将右下角的图片移到跟上一个图片平行的位置。
CSS和DIV布局
关于CSS和DIV的布局说明,详细描述了关于HTML中的布局。值得学习和参考。
如何实现两张图片的叠加?
使用aspjpeg可以实现图片在规则的长方形图片上叠加,但是如何在不规则图像上叠加(如圆形,菱形图片等)?有没有人知道并指点一下阿,急!!!
如何实现两张图片的比较
现在的需求是: 通过算法或者控件实现两张图片的比较,就是比较图片是不是一样的。我试过将图片先读成二进制流,然后比较两张图片的二进制流是不是一样的。比如说要比较图片是a.png 和b.png 。现在的问题是如果b.png是a.png 的复制过来的 则可以通过。若b.png是重新截图得到的,用肉眼看上去和a.png是完全一样的,大小也是一样的,则结果是,a.png和b.png 是不一样的。 所以我觉得二进制流比较行不通,可是应该怎么才能实现两张图片的比较呢?有没人有更好的方法?
如何实现两张图片的淡入淡出?
我在WINCE下用sdk进行图片的淡入淡出,使用AlphaBlend在屏幕上进行绘制时发现图片其实只是被覆盖了,后面的那张图片,仔细观察,发现还是存在一定的背景,比如如果原来那张图片很大,覆盖的图片很小,没有被覆盖的地方就完全显示出来了,请问还有其他的方式吗?谢谢了。
如何实现两张图片的渐变?
就是每个点的颜色由一张逐渐变为另一张,必须要一个一个点的计算吗?有没有快一些的算法,取每个点的颜色很慢的。(Canvas.Pixels[x,y],800*600就要取48万个点)rnrn最好有现成的组件可以用,望大家帮忙,谢谢。
如何实现两张图片的渐变
在WIN32界面下rn如何实现两张图片的渐变rn求代码
Css基础及Css$Div布局
CSS基础讲解及 CSS+DIV布局教程,网上收集的资料打包电子书,非常实用。
初学,如何实现div布局
rnrnrn rn rn 无标题文档rnrnrnrnrnrn rn rn 无标题文档rnrnrnrn rn左边的rnrnrn rn中间rnrnrn rn右边的rnrnrnrnrnrn请问如何才能实现左中右层的布局呢rn左边的贴着浏览器左边rn右边的贴着浏览器右边rn中间的剧中浏览器
精通CSS与DIV布局实例代码
精通CSS与DIV布局书籍的权威实例代码,20章节全部都有,愿和朋友们分享
CSS 实例 div布局
用div布局,不建议用table new document *{padding:0; margin:0;border:0;} body{font-size:12px; } .container{ width:700px; margin:0 auto; } .banner{ height:200px;
CSS DIV布局例子.
CSS DIV布局例子手把手教你,CSS DIV布局例子手把手教你.
CSS之DIV布局样式class
无标题文档 .header{ color:blue; width:100%; height:200px; background-color:green; border-color:red 5px solid; } .left{ color:white;
css 不靠表格div布局
&amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;style type=&quot;text/css&quot;&amp;gt; div.container { width:100%; margin:0px; border:1px solid gray; line-height:30px; } div.header,div.footer { padding:0.5em; color:white; backgroun...
关于CSS和DIV布局的问题
目的是这样的,有Left、Center、Right三个DIV。rnCSS采用的是外部链接,而不是Inline的CSSrn其中Left、Right的Width都已经在CSS里面定义。rn希望能在CSS里做到将Left、Center、Right三个横向排成一行,并横向占满页面。rnIE里可以解决,要用Div的float、css expression、和对象的currentStyle属性rn可是在Mozila和Opera里就没办法了...rn有没有更简单并且通用的法子?rn当然,用Table可以解决上述所有问题,但是我不喜欢Table.页面载入太慢,能不能用Div+css实现呢:Drn就当是个变态的要求吧。rn
css div布局的问题
下面的网页代码和CSS代码怎么调rn才能让推荐软件在左边,最近更新在中间,推荐下载在右边呢?rn现在是推荐下载在左边,最新更新在中间,推荐软件在右边rn网页代码rnrnrnrn rn aaaaaaaaaarn rnrnrnrn rnrn rn 推荐软件rn rn rn rn rn aaaaaaaaaa最近更新rn rn rn rn rn 推荐下载rn rn rnrnrnrnCSS代码rn#recommend_down rn float: left;rn width: 210px;rn clear: left;rn border: 1px #88D3E3 solid;rn margin: 5px 0 0 0;rnrn#recommend_down dl rn border-bottom:1px #88D3E3 dashed;rn float:left;rn width:100%;rn clear:both;rnrn#recommend_down dt rn float:left;rn margin:10px;rn display:inline;rnrn#recommend_down dt img rn padding:2px;rn border:1px #ccc solid;rnrn#recommend_down dt a:hover img rn border:1px #88D3E3 solid;rn rn#recommend_down dd rn float:left;rn width:145px;rn height:67px;rn overflow:hidden;rnrn.wrap h2 rn height: 25px;rn line-height: 25px;rn font-size: 14px;rn padding-left: 8px;rn background: #E8FAFE;rn color: #007498;rn text-align: left;rn margin: 1px;rn border-bottom: 1px #D3E9ED solid;rnrn.wrap h2 span a rn float: right;rn font-weight: normal;rn margin-right: 5px;rn color: #007498;rnrn#last_updated rn float: right;rn width: 400px;rn margin: 5px 8px 0 8px;rn border: 1px #88D3E3 solid;rnrn#last_updated ul, #hot_down ul, #recommend_down ul rn margin: 5px 10px;rnrn#last_updated .softblist li span rn color: #999;rnrn#last_updated .softblist li span.today rn color: #FF0000;rnrn#last_updated a.type, .index_downrank a.type rn color: #999;rnrn#last_updated a.type:hover, .index_downrank a.type:hover rn color: #f60;rn text-decoration: underline;rnrn#hot_down rn float: right;rn width: 178px;rn margin: 5px 0 0 0;rn border: 1px #E8CA78 solid;rnrn#hot_down h2, .index_downrank h2 rn background: #FEF9EB;rn color: #8F5400;rn border-bottom: 1px #F9F0C0 solid;rnrn#common_tools h2 rn padding: 0;rn text-align: center;rnrn
CSS详解-DIV布局!!
详细介绍CSS,DIV的布局与结构!!其中有HTML+css的标签的讲解!!
div布局,css控制
Document div{ height: 300px; background-color: blue; } #main{ background-color: green; } #footer{ background-color: gray; } 1.httml中css的四种方法引入 (1)行内式 将ST
CSS定位和DIV布局
CSS定位知识点总结: DIV定位知识点总结:
ios合并两张图片(叠加两张图片 重合两张图片)
创建一个 UIImageView (黑斜体是关键一行代码) UIImageView *imgView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 375, 667)]; ***imgView.image = [self addImage:@"psb33" withImage:@"littlesun"];*** img
如何实现两张JPG图片的合成?
如何实现两张JPG图片的合成?
在C#中如何实现两张图片合并?
在C#中如何实现两张图片合并?
如何实现两张图片的覆盖加载
在显示上由上往下依次显示,关键是要对下面的图片进行处理。   主要的属性是z-index和positon,对于覆盖叠加并且是显示在上面的要进行绝对定位,也就是设置position:absolute;除了设置position后,还要设置z-index属性。 其次还要注意的是: 1)比如将文字和图片进行重叠排列,文字置于图片的上面,如果是要图片进行高亮显示,则要在css布置上,要先编写标签,这
C#实现两张图片混合
实现两个图片的混合,为了赚点积分,大家仅供参考。迫不得已
CSS问题 两张图片并列显示问题
大家好 我初学ASP.net 以下是我的问题 希望大家帮忙下rn我是想让两张图片并列显示的 但在Firefox可以 在IE中反而不行,具体代码如下:rnDefault.aspx文件:rn[code=HTML]rnrn rn rn rn rn rn 搜索栏rn 可变主要内容区rn 版权所有©掌新rn rnrn[/code]rnrnCSS文件:rn[code=CSS]rn *rn /*把默认值都设置为0*/rn margin:0px;rn padding:0px;rn rn rn body rn font-size:14px;rnrnrna:link, a:visitedrn /*鼠标未移上去和访问过的超链接的样式*/rn color:Black;rn text-decoration:none;rnrna:hoverrn /*鼠标移上去的超链接的样式*/rn color:#00F;rn text-decoration:underline;rnrnrn#Top,#Search,#Main,#Footerrn margin:10px auto 10px auto;rn width:760px;rnrnrn#Toprn height:120px;rnrnrn#Top imgrn float:left;rn margin: 0;rn border-width: 0;rnrnrn#Searchrn clear:left;rn border:1px solid #d6d7d6;rnrnrn#Mainrn border:1px solid #d6d7d6;rnrnrn#Footerrn /*尾部文字居中*/rn text-align:center;rn border-top:1px solid #d6d7d6;rn padding-top:10px;rnrn[/code]rn请大家帮忙看下,而且还有一个问题就是margin:10px auto 10px auto;在IE中内容不会自动给居中,反而在fireFox则会,谢谢各位帮忙。
GDAL实现两张图片相减
GDAL实现两张图片相减,分波段读取图片
Android两张图片渐变实现
Android两张图片渐变实现   下面代码实现从bg1.png到bg2.png经过4000ms的转变。主要用到了android.graphics.drawable.TransitionDrawable.TransitionDrawable类 //得到此View下的资源 Resource res = getResource(); //图片渐变对象 TransitionDrawable i...
双目测距时,将两个相机竖直平行放置跟水平平行放置 区别在哪呀
谁知道双目测距时,将两个相机竖直平行放置跟水平平行放置 区别在哪呀。matlab标定工具箱能直接用吗 我直接用的标定出来的结果不准了。校正过程也变了吗 去哪里找竖直放置相机的测距资料呀 我找了很久没找到。哪位知道的 请教一下呀。rn谁在做这方面啊 一起探讨一下呀
html5图片和放置在底部的实现
Test html { height:100%; } body { /*background-color:#FFFFFF;*/ margin:0; /*height:100%;*/ background: #FFFFFF url(${pageContext.request.contextPath }/resources/js/h5/bcg.png) no
如何合成两张BMP图片
如何合成两张BMP图片一张图片,我以前在这看见过类似问题,但是搜索不到了,请大家帮个忙。
如何合成两张bmp的图片
我有两张bmp的图片,一个正面的照片,一个侧面的照片,我想把它合成为一个人脸的全景照片,我现在连方向都找不到,谁能告诉我怎么做!!万分感谢!!
如何判断两张图片重叠
移动两张图片放在一起,可以合成一张新的图片,请问怎么判断两张图片已经重叠了或在同一个区域内?或者能不能提供个思路怎么实现这个效果
如何同时上传两张图片?
如何同时上传两张图片?rn我想为一个产品同时上传一张缩略图和一张原图,rn并且还要添加一些产品的规格等说明性文字!rn本来我可以用俩步可以做的!rn就是先上传一张图片和规格等,再上传大图,rn现在想一步到位,却怎么都调不好!rn请大家帮个忙啊!
css中的div布局之巧用div
作为一个前端学习的新手,学习css这块内容还是挺吃力的,所以经常去看看视频,对自己快速掌握很有帮助,今天看到一个很不错的案例。 新手在页面布局时往往很依赖div来分割页面,例如下面这个页面: 这是一个聊天的页面,页面有头像,ID,聊天内容以及时间。看到这个页面我的第一思路是用三个div来进行操作。首先一个大的div,在大的div中分左右两个子div, 然后在左div中添加图片,
div布局,css控制(html)4-5
div圈地,css种田 1 css引入方式: 2 div控制方式: 3 两个div并排显示: ----------1: 嵌入、内联、外部引用 (最优先)嵌入:style="" 内联:标签 外部:href="xxx.css" ---------- 语法:样式项:属性 ---------- 计量单位 px(像素) 百分比em(相对单位) background-color
CSS盒子模式(DIV布局快速入门)
CSS盒子模式(DIV布局快速入门),关于前台的设计必须的。
css中div布局学习(1)
看完慕课网中的div布局,简单记录一下里面的内容: 1.实现效果: 上面实现效果主要是考虑如何实现块元素居中的问题,关键代码: margin: 0 auto; 实现代码: 布局aaa --> body { margin: 0; padding: 0 } .top{height: 100p
CSS中div布局小问题,求救!
效果图地址:http://hi.csdn.net/space-3698777-do-album-picid-634864.htmlrn(不能上传本地图片让我很伤)rnrn要求 foot 总是在main content 和 additoin content的下方,注意:这里的man content 和 addition content 的高度不一定是一样的rnrn求解!
css如何实现图片遮盖另外的图片
如果两个图片位置有重叠但不重合,本来想显示的图片在底下被覆盖如何不被覆盖而完全显示
CSS float影响下面div布局
要在使用float后加上一个空白的div,其css属性为clear: &amp;lt;div class=&quot;clear&quot;&amp;gt;&amp;lt;/div&amp;gt; 其 css要用 : .clear { clear: both; }
相关热词 c#入门推荐书 c# 解码海康数据流 c# xml的遍历循环 c# 取 查看源码没有的 c#解决高并发 委托 c#日期转化为字符串 c# 显示问号 c# 字典对象池 c#5.0 安装程序 c# 分页算法