CreamQ

Создание узла с white-space через JS

Рекомендуемые сообщения

Вопрос в следующем: 

При нажатии на кнопку создается элемент "entireDrink ", в который добавляется input-картинка и span-текст, "entireDrink " получает тег "one" в котором указан параметр "White-space:  nowrap;". При повторном нажатии на ту же кнопку меняется span-текст, а при нажатии на другую добавляется еще один такой же элемент и т.д.

Мне надо, чтобы в окне div эти элементы переносились на новую строку, но не разделялась картинка с текстом, а получается, что "entireDrink "s просто множатся по оси-x.

Если добавлять без White-space:  nowrap, то все элементы переносятся отдельно: картинки и тексты.

В другом месте, созданном заранее в html это работает, т.е. узлы с тегом "one" переносятся на новую строку сразу со всем содержимым.

Помогите, пожалуйста, разобраться. Заранее спасибо.

Ниже на скриншотах: 1) заполнение без "White-space:  nowrap;" 2) С "White-space:  nowrap;"
Вот кусок кода: 

Скрытый текст

 


var parentElem = document.getElementById('basketGoods');
            var entireDrink = document.createElement('one');
                entireDrink.id = 'entireDrink'+drink.id;
            var picOfDrink = document.createElement('img');
                picOfDrink.src=document.getElementById(drink.id).src;
                picOfDrink.className="addedPic";
                picOfDrink.id="pic"+drink.id;
            var numberOfDrinks = document.createElement('span');
                numberOfDrinks.id = 'numberOfDrinks'+drink.id;
            entireDrink.appendChild(picOfDrink);
            entireDrink.appendChild(numberOfDrinks);
            parentElem.appendChild(entireDrink);

 

 

 

Скрытый текст

 

vendingWrong.PNG

vendingWrong2.PNG

 

 

Изменено пользователем CreamQ
Уточнение

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Только что, Switch74 сказал:

one у вас display:block; ?

 

Вообще никакой не ставил. one{    white-space: inline;    }.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

попробуйте поставить
и вы ведь писали

Цитата

 "one" в котором указан параметр White-space:nowrap;

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
2 минуты назад, Switch74 сказал:

попробуйте поставить

Теперь вот так:

vendingWrongDisplayBlock.PNG

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
2 минуты назад, Switch74 сказал:

one{  display:inline-block;  white-space: nowrap;    }.

Спасибо! Работает. :)

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

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

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас


  • Похожие публикации

    • Автор: lev99
      Вот такой код:
      <script type="text/javascript" src="//vk.com/js/api/openapi.js?150"></script> <!-- VK Widget --> <div id="vk_playlist_-2000646569_646569"></div> <script type="text/javascript"> VK.Widgets.Playlist('vk_playlist_-2000646569_646569', -2000646569, 646569, 'ae82627d6c8bb4500d'); </script> я нашел как переделали виджет группы:
      https://javascript.ru/forum/dom-window/40760-ne-otobrazhaetsya-vidzhet-vk-v-tabakh.html
      <iframe src="http://vk.com/widget_community.php?gid=29627308&width=190&height=220" width="190" height="220" scrolling="no" frameborder="0"></iframe> Но с виджетом плейлиста так не выходит, помогите?
    • Автор: Sparrow
      Всем привет, помогите, пожалуйста, с идеями верстки следующего :

Карта разработчиков

Карта участников

Отметь себя на карте для поиска или предложения работы