Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.07.2019, 18:27
Новичок на форуме
Отправить личное сообщение для DimJavaScript Посмотреть профиль Найти все сообщения от DimJavaScript
 
Регистрация: 24.02.2016
Сообщений: 8

"плавающий" div
Здравствуйте.

В конструкции
Код:
<div class="smi">
 <div class="border"><img class="img_ba" src="/img/arc.png"></div>
 <div class="border">
  <div class="smi_t">ONE</div>
 </div>
 <div class="border be"><img class="img_ba" src="/img/arc.png"></div>
</div>
Код:
.smi { height: 19.4%;}
.border { float: left; height: 100%;}
.smi_t { margin-left: 2%; margin-right: 2%; white-space: nowrap;}
хочу сделать динамическое изменение ширины среднего блока и, соответственно, перемещение правого блока вправо-влево, в зависимости от этой ширины.

Не пойму как.

Ответить с цитированием
  #2 (permalink)  
Старый 20.07.2019, 19:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

DimJavaScript,
вариант...
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/minireset.css/0.0.2/minireset.min.css'>

  <style type="text/css">
  body {
      height: 100vh;
      background-color: #f0e68c;
  }
  .smi {
      height: 19.4%;
      display: flex;
  }
  .border {
      height: 100%;
      background-color: #0000cd;
  }
  .border:nth-child(1) {
      flex: 0 0 200px;
      background-color: #00ced1;
  }
  .border:nth-child(2) {
      flex: 1;
      background-color: #da70d6;
  }

  .smi_t {
      margin-left: 2%;
      margin-right: 2%;
      white-space: nowrap;
      background-color: #9932cc;
  }
  </style>
</head>
<body>
<div class="smi">
 <div class="border"><img class="img_ba" src="/img/arc.png"></div>
 <div class="border">
  <div class="smi_t">ONE</div>
 </div>
 <div class="border be"><img class="img_ba" src="/img/arc.png"></div>
</div>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 23.07.2019, 13:59
Новичок на форуме
Отправить личное сообщение для DimJavaScript Посмотреть профиль Найти все сообщения от DimJavaScript
 
Регистрация: 24.02.2016
Сообщений: 8

Средний див будет изменять свою ширину динамически (по @keyframes).
Задача — динамическое поведение правого дива — перемещение вправо-влево, вслед за изменением размера среднего дива.
Ответить с цитированием
  #4 (permalink)  
Старый 23.07.2019, 16:17
Новичок на форуме
Отправить личное сообщение для DimJavaScript Посмотреть профиль Найти все сообщения от DimJavaScript
 
Регистрация: 24.02.2016
Сообщений: 8

В общем, изначальный код работает.
Добавил, только:
Код:
<div class="smi">
 <div class="border"><img class="img_ba" src="/img/arc.png"></div>
 <div class="border bmid bmid_anim">
  <div class="smi_t">ONE</div>
 </div>
 <div class="border be"><img class="img_ba" src="/img/arc.png"></div>
</div>
Код:
.bmid { width: 0; }

.bmid_anim{
	animation-name: smMiddleOn;
	animation-timing-function: ease;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards; }

@keyframes smMiddleOn { to { width: auto; } }

Только один неприятный момент.
Если среднему диву ставлю widt: 100% — он принимает размер родителя.
Если ставлю auto — размер, как и должен быть в соответствии с содержимым, только duration перестаёт работать, т.к. конечный размер становится неопределён.

Что-то, я снова в тупике...


Последний раз редактировалось DimJavaScript, 23.07.2019 в 16:19.
Ответить с цитированием
  #5 (permalink)  
Старый 26.07.2019, 13:24
Новичок на форуме
Отправить личное сообщение для DimJavaScript Посмотреть профиль Найти все сообщения от DimJavaScript
 
Регистрация: 24.02.2016
Сообщений: 8

Спасибо, Paulie_D с css-tricks
https://css-tricks.com/forums/topic/dynamic-div/

Замена width на max-width решило проблему.

Поразительно!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
обработчик событий для динамически добавленных элементов Tecvid Events/DOM/Window 28 25.06.2018 13:49
Показать div при наведении / jQuery updaite Элементы интерфейса 4 28.07.2014 03:45
Cookie для меню аккордион и для div Lastedl jQuery 1 03.12.2013 04:55
Проблемы с div обновлённым через (#id).load erlcat jQuery 4 03.03.2013 03:41
проблема с div И animate g00000dman jQuery 2 24.03.2011 23:34