如何将两个图像与HTML和CSS并排放置以最佳地填充给定宽度?
发布时间:2020-12-14 23:22:07 所属栏目:资源 来源:网络整理
导读:我想在DIV元素内并排放置两个任意图像,这个图像正好是800像素宽(宽度= 800像素).图像的宽度和高度也可以是各种尺寸.有时宽度大于高度,有时宽度小于高度.我将两个图像放在div元素中,第三个div放在div元素中.我尝试了这段代码,但无法正常工作.我该怎么办? JSF
我想在DIV元素内并排放置两个任意图像,这个图像正好是800像素宽(宽度= 800像素).图像的宽度和高度也可以是各种尺寸.有时宽度大于高度,有时宽度小于高度.我将两个图像放在div元素中,第三个div放在div元素中.我尝试了这段代码,但无法正常工作.我该怎么办? JSFiddle:
http://jsfiddle.net/gUT43/
<!DOCTYPE html> <html> <head> <style> img { max-width: 100%; height: auto; width: auto9; /* ie8 */ } div { display: inline-block; white-space: nowrap; } </style> </head> <body> <div style="max-width: 800px; border:2px black solid"> <div style="height: auto; border:1px green solid""> <img src=http://i.imgur.com/Xt6vUQD.jpg> </div> <div style="height: auto; border:1px blue solid""> <img src=http://i.imgur.com/BqFMNlq.jpg > </div> </div> </body> </html> 解决方法
在我看来,你想要浮动:离开包含图像的div,然后在这些元素之后添加另一个div来清除浮动.
你的代码的JSFiddle将是非常好的,所以我们可以以更有效的方式帮助:) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |