Ответы пользователя Antowa Kartowa

Как разместить все строчные элементы таблицы равномерно по ширине блока?

Antowa Kartowa @AntowaKartowa

Зачем постить код импорты компонент которых у меня нет если вопрос по верстке. Нужно было добавить сгенерированный html и css который быстро можно было вы вставить в онлайн редактор. Там мне нужно вместо MySpreadsheet вставлять table в разметке и в стилях и руками вводить значения ячеек.

Если я правильно понял вопрос, то для начала нужно выровнять таблицу добавив table margin: 0 auto;
В третьей колонке выровнять контент по правому краю, во второй колонке по центру.

table {
  width: 90%;
  margin: 0 auto;
}

td:nth-child(2) {
  text-align: center;
}

td:nth-child(3) {
  text-align: right;
}

Ответ написан более года назад

3 комментария

Как покрасить определённую часть строки?

Antowa Kartowa @AntowaKartowa

Ну какого-то встроенного готового изящного решения наверное нет. Я вижу лишь вариант самописной (или использовать готовую библиотеку) функции (утилиты) под собственные нужды.

Например вот функция оборачивающая исключительно в span. Один из недостатков функции в том, что она опирается на `matchAll` метод поддерживаемый вроде бы пока еще не всеми браузерами.

Параметры:
- строка в которой производится поиск и замена
- искомая строка (может быть регулярное выражение, но обязательно с `g` флагом)
- необязательное значение класса для span (чтоб не печатать нужно любое falthy значение - null, '', 0, false)
- необязательное значение порядкового индекса найденного совпадения для оборачивания. по умолчанию - `0`. может иметь негативное значе `-1` для последнего значения сколько бы их не было, `-2` для предпоследнего и тд.

const spanText = (str, pattern, className = '', index = 0) => {
  const matches = [...str.matchAll(pattern)];
  
  if (!matches.length || !matches.slice(index)[0]) return str;

  const { 0: match, index: startIndex } = matches.slice(index)[0];
  const endIndex = startIndex + match.length
  const spanOpenTag = !className ? '<span>' : `<span class="${className.toString()}">`;

  return str.slice(0, startIndex) + spanOpenTag + match + '<span>' + str.slice(endIndex);
} 

const re = new RegExp(word, 'g');
text.innerHTML = spanText(text.innerHTML, re);

Ответ написан более года назад

Комментировать

Почему нету картинки при свойствах?

Antowa Kartowa @AntowaKartowa

В css есть свойство `background`. Которое включает в себя 'background-color`, `background-image`, `background-position` и другие подмножества свойства 'background`. Все значения этих подмножеств можно указать в одну строку через запятую в качестве значения этого самого 'background`. Но каждое отдельное свойство подмножества 'background` отвечает и соответственно принимает только соответствующие ему значения. 'background-image` отвечает только за указание на фоновое изображение. А на его позиционирование влияют другие свойства подмножества 'background-position`, `background-size`, `background-repeat` и тд.

Ответ написан более года назад

Комментировать

Как реализовать такое расположение блоков?

Antowa Kartowa @AntowaKartowa

Предложу так навскидку. Может и не работать, могут нюансы полезть, но я бы начинал в таком направлении работать. У вас две колонки. Во второй колонке по очереди слоями идут блоки хлебных крошек, заголовка, блок с фото и какими-то ссылками, потом секция с основным текстом. Секция с фото и ссылками разбита на две колонки - одна для фото, другая для текста и ссылок. У секции с фото и ссылками есть свойство position: relative. Так же внутри секции с фото и ссылками должен быть блок который будет играть белый фон с желтой рамкой. У него например position: absolute, z-index: -1, top: -15px; left: 150px, right: 0px; bottom: - 125px;

https://jsfiddle.net/AntowaKartowa/Lh7bdef0/

Войдите на сайт