在HTML頁面上並排顯示兩個圖像

Question

我試圖並排放置兩張相同尺寸的圖像。 如果我使用table那么我可以並排顯示兩個圖像。 但是在我的CSS樣式表中，我使用表格的自定義格式，這也顯示在包含圖像的頁面上。

我想只顯示兩個圖像，沒有任何自定義背景，邊框等。

我嘗試使用div ， span ， ul ＆ li （等）但在每種情況下都失敗了。

1. 如何在不使用table情況下將兩個圖像（相同大小）放在一行table ？

2. 如果我必須使用相同的table ，那么如何使用CSS為我的表使用兩種（或更多種）不同的格式？

Answer 1

你可以這樣做：

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

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

Answer 2

使用float:left; 你說你發現了一點左邊緣，所以你可以試試這個

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

這可能是邊緣或填充的原因。 或者你應該使用身體標簽

body{margin:0;
padding:0;
}

那么你就不需要寫margin:0; padding:0; margin:0; padding:0; 。

Answer 3

1. 你試過float:left嗎？
2. 將不同的類附加到每個表，然后在您的css中：

.table_one {
    background-color: #CC0000;
}

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

Answer 4

通常，表是在所有情況下都能工作的唯一方法。 根據HTML中兩個圖像的位置，可能有更好的方法，但這取決於。 是否有包含兩個圖像的元素？ 該元素的布局屬性是什么？

改變表屬性的CSS樣式表是一件壞事。 一個應該只設置一類表的屬性（使用table.className）或特定的表（使用表#id）。 如果無法更改樣式表，則必須撤消對特定表所造成的損壞。

為此，找出樣式表在您身上發生了哪些屬性，並通過為您的表發出CSS規則來更改它們（帶有table.className或table #id的規則將覆蓋更一般的規則）（可選）或者使用內聯樣式將屬性編碼為HTML（如果您只有一個這樣的對，則可以快速修復）。

Answer 5

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

小提琴

Answer 6

這樣做：

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

它默認顯示inline圖像。 如果沒有，請添加：

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

Answer 7

你基本上做的是將兩個圖像源標簽放在一行代碼中。 像這樣。

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