почему добавленный элемент убирает пространство между элементами?

0

Я применил appendTo() jquery, но мне хотелось бы знать, почему изображение не имеет места между изображениями. Вы можете видеть в демонстрационном примере добавленное изображение, которое устраняет пробел.

var m = $('#main');
m.find('img:lt(3)').clone().appendTo(m);

демонстрация

Хорошо, я понял это сейчас. Но как я могу добавить это пространство?

  • 0
    Разрыв заключается в пробелах в вашей разметке HTLML. appendTo не добавляет пробелы.
Теги:

4 ответа

2
Лучший ответ

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

Браузеры помещают пробел между двумя изображениями, у которых есть пробелы в HTML между ними. Когда вы добавляете изображения программно, между ними нет пробелов и, следовательно, нет пробелов.

Вы даже можете сгладить существующие пробелы до нуля, установив размер шрифта: 0 или исключив пробелы в HTML.

img {
    width: 100px;
    padding: 3px;
}

#main {
    font-size: 0;
}

Здесь представлена демонстрация равного расстояния между всеми изображениями: http://jsfiddle.net/jfriend00/sHnS3/

Поделиться
  • 0
    Но наличие полей и отступов не показывает равных пробелов ... jsfiddle.net/8Wd38/12
  • 0
    @ C-Link - вы должны избавиться от пробелов в исходных изображениях, чтобы вы могли контролировать их все одинаково с отступом или полем. Тогда они будут идентичны. Посмотрите эту демонстрацию: jsfiddle.net/jfriend00/sHnS3
Показать ещё 6 комментариев
2

Поскольку вы клонируете только images видите, что вы использовали line-break в каждом image Таким образом, cloning выполняется только для images не для line-breaks

Если вы видите демонстрацию без line-breaks вы увидите, что между ними есть space И вы хотите дать same space для каждого image затем использовать padding:3px like,

img{
    width: 100px; 
    padding:3px;
}

демонстрация

Обновлено, вы можете сделать это с помощью jquery без paading,

var m = $('#main');
var n=m.clone();
n.find(':gt(2)').remove();
$(n.html()).appendTo(m);

Демо с jquery

Но я предлагаю использовать CSS если нет необходимости в jquery

Поделиться
  • 0
    так как я могу добавить элементы с переносами строк
  • 0
    @ C-Link да, вы можете увидеть мой updated answer и fiddle
Показать ещё 1 комментарий
0

Попробуйте добавить float: left; в классе img css

Поделиться
0

JQuery cloning устраняет разрывы пробелов/строк между элементами html.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню