在HTML页面上并排显示两张图片

Question

5

我想把两张大小相同的图片并排放置。如果我使用表格table，那么我就能将两张图片并排显示。但是在我的CSS样式表中，我正在使用自定义格式来显示表格，这也会显示在包含图片的页面上。

我只想显示两张图片，没有任何自定义背景、边框等。

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

- LalitBarik

每个解决方案都可能因您的需求而异。因此，在尝试之前，请发布您的代码。我们只是明确这一点。 - Karthik

7个回答

2

使用 float:left; 表示你想要一点左边距，所以你可以尝试这样做。

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

这可能是由于边距或内边距引起的。或者你应该像这样使用body标签：

body{margin:0;
padding:0;
}

那么您就不需要写 margin:0; padding:0;。

- Kali Charan Rajput

1

.table_one {
    background-color: #CC0000;
}
.table_two {
    background-color: #00CC00;
}

- nc3b

我已经尝试使用float:left。另外，我忘了在我的原始问题中提到，但是当我使用“table”时，它会添加一个小的左边距，而我想在显示图像时避免这种情况。 - LalitBarik

0

你可以使用 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;
}

- Maarten Peels

0

你所要做的基本上就是在一行代码中将两个图像源标签放在一起。像这样。

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

- Jake

0

只需要这样做：

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

默认情况下，它将以内联方式显示图像。如果没有，请添加：

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

- Mr. Hugo

0

通常，表格是在所有情况下都有效的唯一方法。根据两个图像在HTML中的位置，可能会有更好的方法，但这取决于具体情况。是否存在一个包含这两个图像的元素？该元素的布局属性是什么。

更改表格属性的CSS样式表是不好的做法。应该只设置一类表格的属性（使用table.className）或特定表格的属性（使用table#id）。如果您无法更改样式表，则必须撤消它对特定表格造成的影响。

为此，请找出样式表对您进行了哪些属性更改，并通过发出适用于您的表格的CSS规则（使用table.className或table#id的规则将覆盖更一般的规则）（最好的方法），或者使用内联样式将属性硬编码到HTML中（如果您只有一个这样的对，则可以快速修复）来将其更改回来。

- buti-oxa

你不能为泛化样式列表吗？或者如果你只需要两个元素，可以使用带样式的 div。 - L̲̳o̲̳̳n̲̳̳g̲̳̳p̲̳o̲̳̳k̲̳̳e̲̳̳

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sarfraz · Accepted Answer

你可以这样做：

你可以像这样做：

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

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