HTML   发布时间:2022-04-14  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了如何将两个图像与HTML和CSS并排放置以最佳地填充给定宽度?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在DIV元素内并排放置两个任意图像,这个图像正好是800像素宽(宽度= 800像素).图像的宽度和高度也可以是各种尺寸.有时宽度大于高度,有时宽度小于高度.我将两个图像放在div元素中,第三个div放在div元素中.我尝试了这段代码,但无法正常工作.我该怎么办? JSFiddle: http://jsfiddle.net/gUT43/
<!DOCTYPE html>
<html>
<head>
<style>
img {
     max-width: 100%;
     height: auto;
     width: auto\9; /* 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将是非常好的,所以我们可以以更有效的方式帮助:)

大佬总结

以上是大佬教程为你收集整理的如何将两个图像与HTML和CSS并排放置以最佳地填充给定宽度?全部内容,希望文章能够帮你解决如何将两个图像与HTML和CSS并排放置以最佳地填充给定宽度?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。