<img> в <table>без пробелов - PullRequest
Новая
       18

<img> в <table>без пробелов

0 голосов
/ 08 августа 2011

Я пытаюсь поместить два изображения рядом друг с другом внутри <td> (также пробовал одно <td> для каждого img), но между изображениями есть пробелы, и я не понимаю, откуда они приходят .. Я могу решить мою проблему с помощью поплавка, но я пытаюсь избежать этого. Если кто-то может объяснить мне, почему это происходит. Я взял несколько советов из других вопросов, но это не сработало.

Вот мой код: 

<html>
<head>
    <style "text/css">
        td, tr, img  { padding: 0px; margin: 0px; border: none; }
        table { border-collapse: collapse;} 
    </style>
</head>
<body style="background: black;">
    <center>
        <table cellspacing="0" cellpadding="0">
            <tr>
                <td>
                    <img alt="" title="" src="http://i.min.us/ijCTdY.jpg" />
                </td>
            </tr>
            <tr>
                <td>
                    <img alt="" title="" src="http://i.min.us/jj7Yt6.jpg"/>
                    <img alt="" title="" src="http://i.min.us/ijCo96.jpg"/>
                </td>
            </tr>
        </table>
    </center>
</body>

Вы можете заметить, что верхнее изображение имеет высоту 800 пикселей, а остальные - по 400 пикселей, мне нужен какой-то квадрат, без пробелов между изображениями.

Ответы [ 5 ]

3 голосов
/ 08 августа 2011

img s - встроенные элементы.Горизонтальное пространство между изображениями исходит из пробелов между изображениями в HTML.По той же причине, что здесь есть пробел между символами здесь .

Итак, чтобы исправить это, удалите пробел: http://jsfiddle.net/xMW7N/2/

Вертикальное пространство также потому, чтоизображения являются встроенными элементами.Пробел - это пространство, зарезервированное для спусков в таких письмах, как g и j.

. Чтобы исправить это, установите vertical-align: top на img: http://jsfiddle.net/xMW7N/3/

Хотя в вашемcase (как уже упоминалось в вашем вопросе), настройка float: left работает просто отлично: http://jsfiddle.net/xMW7N/4/

Это работает, потому что float: left заставляет display: block, поэтому все проблемы, вызванные встроенными изображениями, решены.

3 голосов
/ 08 августа 2011

Это проще сделать без таблиц: http://jsfiddle.net/feSxA/

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    body {
        background: black;
    }
    .imgHolder { 
        width: 800px;
        margin: auto;
    }
    .imgHolder img {
        float: left;
    }
    </style>
</head>
<body>
    <div class="imgHolder">
        <img alt="" title="" src="http://i.min.us/ijCTdY.jpg" />
        <img alt="" title="" src="http://i.min.us/jj7Yt6.jpg" />
        <img alt="" title="" src="http://i.min.us/ijCo96.jpg" />
    </div>
</body>
</html>
3 голосов
/ 08 августа 2011

Это пробел в самой разметке. Если вы удалите разрыв строки и пробелы между двумя изображениями, пробел исчезнет.

Пробел рассматривается как текст, как один пробел.

0 голосов
/ 08 августа 2011

Добавьте display: block; к вашим изображениям.

Это удалит все пробелы, вызванные встроенным изображением, но, возможно, вам придется разделить ячейки, чтобы они могли сидеть рядом.

Вы также можете удалить пробелы, которые должны избавиться от пробелов.

0 голосов
/ 08 августа 2011

попробуйте добавить рамку = "0" в элемент таблицы

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...