Перемещение DIV с использованием только CSS

Этот вопрос несколько лет, но я пришел через дубликат. Я хочу предложить более общее решение. Если вы знаете, что у вас всегда есть фиксированное число предков, вы можете использовать некоторые собственные объединения, как уже было предложено в ответах. Если вы хотите, чтобы общий подход продолжал чтение.

То, что вам нужно здесь, называется Quotient в реляционной алгебре. Котировщик - это более или менее обратное декартово произведение (или Cross Join в SQL).

Предположим, что ваш предок установлен A (я использую здесь обозначение таблицы, я думаю, что это лучше для понимания)

ancestry
-----------
'England'
'France'
'Germany'

и ваш пользовательский набор U

user_id
--------
   1
   2
   3

Декартовым произведением C=AxU является следующее:

user_id  |  ancestry
---------+-----------
   1     | 'England'
   1     | 'France'
   1     | 'Germany'
   2     | 'England'
   2     | 'France'
   2     | 'Germany'
   3     | 'England'
   3     | 'France'
   3     | 'Germany'

Если вы вычислите коэффициент распределения U=C/A, вы получите

user_id
--------
   1
   2
   3

Если вы переделаете декартовский продукт UXA, вы снова получите C. Но учтите, что для набора T, (T/A)xA не обязательно будет воспроизводить T. Например, если T является

user_id  |  ancestry
---------+-----------
   1     | 'England'
   1     | 'France'
   1     | 'Germany'
   2     | 'England'
   2     | 'France'

, тогда (T/A) есть

user_id
--------
   1

(T/A)xA будет тогда

user_id  |  ancestry
---------+------------
   1     | 'England'
   1     | 'France'
   1     | 'Germany'

Примечание что записи для user_id=2 были устранены операциями Quotient и Cartesian Product.

Ваш вопрос: у какого user_id есть предки из всех стран вашего предка? Другими словами, вы хотите U=T/A, где T - ваш исходный набор (или ваша таблица).

Чтобы реализовать фактор в SQL, вам нужно выполнить 4 шага:

  1. Создайте декартово произведение вашего набора предков и набор всех user_ids.
  2. Найдите все записи в декартовом продукте, которые не имеют партнера в исходном наборе (Left Join)
  3. Извлеките user_ids из набора результатов из 2)
  4. Верните все user_ids из исходного набора, которые не включены в результирующий набор из 3)

Итак, давайте сделаем это шаг шаг за шагом. Я буду использовать синтаксис TSQL (сервер Microsoft SQL), но его легко адаптировать к другим СУБД. В качестве имени таблицы (user_id, ancestry) выберите ancestor

CREATE TABLE ancestry_set (ancestry nvarchar(25))
INSERT INTO ancestry_set (ancestry) VALUES ('England')
INSERT INTO ancestry_set (ancestry) VALUES ('France')
INSERT INTO ancestry_set (ancestry) VALUES ('Germany')

CREATE TABLE ancestor ([user_id] int, ancestry nvarchar(25))
INSERT INTO ancestor ([user_id],ancestry) VALUES (1,'England')
INSERT INTO ancestor ([user_id],ancestry) VALUES(1,'Ireland')
INSERT INTO ancestor ([user_id],ancestry) VALUES(2,'France')
INSERT INTO ancestor ([user_id],ancestry) VALUES(3,'Germany')
INSERT INTO ancestor ([user_id],ancestry) VALUES(3,'Poland')
INSERT INTO ancestor ([user_id],ancestry) VALUES(4,'England')
INSERT INTO ancestor ([user_id],ancestry) VALUES(4,'France')
INSERT INTO ancestor ([user_id],ancestry) VALUES(4,'Germany')
INSERT INTO ancestor ([user_id],ancestry) VALUES(5,'France')
INSERT INTO ancestor ([user_id],ancestry) VALUES(5,'Germany')

1) Создайте декартово произведение вашего набора предков и набор всех user_ids.

SELECT a.[user_id],s.ancestry
FROM ancestor a, ancestry_set s
GROUP BY a.[user_id],s.ancestry

2) Найдите все записи в декартовом продукте, которые не имеют партнера в исходном наборе (Left Join) и

3) Извлеките user_ids из набора результатов из 2)

SELECT DISTINCT cp.[user_id]
FROM (SELECT a.[user_id],s.ancestry
      FROM ancestor a, ancestry_set s
      GROUP BY a.[user_id],s.ancestry) cp
   LEFT JOIN ancestor a ON cp.[user_id]=a.[user_id] AND cp.ancestry=a.ancestry
WHERE a.[user_id] is null

4) Верните все user_ids из исходного набора, которые не включены в результирующий набор из 3)

SELECT DISTINCT [user_id]
FROM ancestor
WHERE [user_id] NOT IN (
   SELECT DISTINCT cp.[user_id]
   FROM (SELECT a.[user_id],s.ancestry
         FROM ancestor a, ancestry_set s
         GROUP BY a.[user_id],s.ancestry) cp
   LEFT JOIN ancestor a ON cp.[user_id]=a.[user_id] AND cp.ancestry=a.ancestry
   WHERE a.[user_id] is null
   )
-3
задан Greg 26 February 2019 в 15:00
поделиться

2 ответа

Если вы не можете изменить html-структуру, в которой она находится, у меня будет решение.

Не самый лучший, я не рекомендую это, но здесь это идет:

position: absolute;

Это продолжается в div с классом .row, который содержит ваш текст. После абсолютной позиции вы должны использовать bottom: - something px и left: something px. Затем вы идете в свой div с id: social и генерируете padding-top: something px.

То, что я использовал, чтобы проверить это было:

Это на .row

position: absolute;
left: 450px;
bottom: -535px;

Это на #social

padding-top: 200px;

Как я уже сказал, это плохо практикуйтесь, и я не рекомендую это делать, но поскольку у вас нет доступа к html, это ваш выбор.

0
ответ дан Andrei Sandica 26 February 2019 в 15:00
поделиться

Flexbox может сделать это:

.container-fluid {
  display: flex;
  flex-direction: column;
}

.container-fluid * {
  order: 1;
}

.txt {
  order: 2;
}
<section>
  <article class="container-fluid">
    <div class="row">1. Row</div>
    <div class="txt">2. Text</div>
    <div class="gallery">3. Gallery</div>
  </article>
</section>

0
ответ дан Paulie_D 26 February 2019 в 15:00
поделиться