Отображение двух изображений рядом на странице HTML

Question

Я пытаюсь разместить два изображения одинакового размера рядом. Если я использую table, то я могу отображать оба изображения бок о бок. Но в моей таблице стилей CSS я использую пользовательский формат таблицы, и это также видно на странице, содержащей изображения.

Я хочу просто отобразить оба изображения без какого-либо пользовательского фона, рамки и т. Д.

Я пытался использовать div, span, ul & li (и т. Д.), Но в каждом случае не получалось.

1. Как разместить два изображения (одинакового размера) в одной строке, не используя 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 как

body{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

Просто сделайте это:

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

По умолчанию будут отображаться изображения inline. Если нет, добавьте:

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

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;
}

Fiddle

Answer 6

Что вы в основном делаете - это помещаете два тега источника изображения рядом друг с другом в одну строку кода. Вот так.

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

Answer 7

Как правило, таблица - единственный способ, который будет работать во всех ситуациях. В зависимости от того, где два изображения находятся в вашем HTML, может быть лучший способ, но это зависит. Есть ли элемент, который уже содержит два изображения? Каковы свойства макета этого элемента.

Таблица стилей CSS, которая изменяет свойства таблицы, - плохая вещь. Нужно только установить свойства класса таблиц (используя table.className) или конкретной таблицы (используя table # id). Если вы не можете изменить таблицу стилей, вы должны отменить ущерб, который он наносит вашей конкретной таблице.

Для этого выясните, какие свойства таблица стилей изменила для вас, и измените их обратно, введя правило CSS для вашей таблицы (правило с table.className или table # id переопределит более общее правило) (предпочтительно) путем жесткого кодирования свойства в HTML с использованием встроенных стилей (хорошо для быстрого исправления, если у вас есть только одна такая пара).