在 HTML 页面上并排显示两个图像答案

【问题标题】：Display two images side by side on an HTML Page在 HTML 页面上并排显示两个图像
【发布时间】：2011-02-19 19:48:50
【问题描述】：

我正在尝试并排放置两个相同尺寸的图像。如果我使用table，那么我可以并排显示两个图像。但是在我的 CSS 样式表中，我为表格使用了自定义格式，这也显示在包含图像的页面上。

我只想显示没有任何自定义背景、边框等的两个图像。

我尝试使用div、span、ul 和li（等），但在每种情况下都失败了。

【问题讨论】：

【解决方案1】：

.table_one { 背景颜色：#CC0000； } .table_two { 背景颜色：#00CC00； }

【讨论】：

【解决方案2】：

你可以这样做：

<style type="text/css">
  .left{float:left;}
</style>

<img class="left" src="path here" />
<img class="left" src="path here" />

【讨论】：

【解决方案3】：

使用float:left;你说你找到了一点左边距，所以你可以试试这个

.left{
    float:left;
    margin:0;
    padding:0;
}

这可能是边距或填充的原因。或者你应该使用像

这样的body标签

body{margin:0;
padding:0;
}

那你就不用写margin:0; padding:0;了。

【讨论】：

【解决方案4】：

一般来说，表格是唯一适用于所有情况的方法。根据这两个图像在 HTML 中的位置，可能会有更好的方法，但这取决于。是否已经存在包含这两个图像的元素？该元素的布局属性是什么。

改变表格属性的 CSS 样式表是一件坏事。只应设置一类表（使用 table.className）或特定表（使用 table#id）的属性。如果您无法更改样式表，则必须撤消它对特定表造成的损害。

为此，请找出样式表在您身上更改了哪些属性，然后通过为您的表发出 CSS 规则（带有 table.className 或 table#id 的规则将覆盖更一般的规则）将它们改回（首选）或通过使用内联样式将属性硬编码到 HTML 中（如果您只有一对这样的样式，可以快速修复）。

【讨论】：

【解决方案5】：

您基本上所做的就是将两个图像源标签并排放置在一行代码中。像这样。

<img src="hi"><img src="hey">

【讨论】：

【解决方案6】：

您可以使用float:left。

html:

<div id="row">
    <img class="left" src="" />
    <img class="left" src="" />
</div>

css:

.left{
    width: 250px;
    height: 250px;
    float: left;
}

//If you don't want margins
body{
    margin:0;
    padding:0;
}

【讨论】：

【解决方案7】：

这样做：

<img src="path/image.ext" /><img src="path/image.ext" />

默认显示图片inline。如果没有，请添加：

<style>img {display: inline;}</style>

【讨论】：