0

если у меня есть блок-1 шириной в 1000px, и мне нужно передвинуть левый край блока-2 (с помощью margin-left), с шириной в 200px, от левого края блока-1 на, скажем, 300px но в процентах, то как мне это сделать?

2
  • 2
    как понять 300px но в процентах? в процентах от чего?
    – qwerty
    Commented 18 мар. 2020 в 4:42
  • от родительского блока конечно Commented 18 мар. 2020 в 6:43

2 ответа 2

0

Обернуть в контейнер и относительно него уже двигать

<style>
   #container{
      border:2px solid #ffde00;
      margin:50px;
   }
   #div1{
      border:1px solid #333;
      margin-left:0;
      height:300px;
   }
   #div2{
      border:1px solid #ff0000;
      margin-left:30%;
      height:300px;
   }
</style>
<div id="container">
<div id="div1">
FIRST DIV
</div>
<div id="div2">
SECOND DIV
</div>
</div>
7
  • 30% это не 300px Commented 18 мар. 2020 в 4:57
  • Задайте для #containet width:1000px. А вообще % - это относительная величина и так делать margin не очень хорошо.
    – Denis I
    Commented 18 мар. 2020 в 4:59
  • в этом то и вопрос - задать 300px но в процентах...:)) Commented 18 мар. 2020 в 4:59
  • 1
    Проценты считаются относительно свойства родительского блока. 300px являются 30% от 1000px ширины родительского блока.
    – Denis I
    Commented 18 мар. 2020 в 5:02
  • 1
    @Степан ответ уже дан - указываете % и это будет процент от ширины родителя.
    – Sanya H
    Commented 23 нояб. 2021 в 17:28
0

300пикс делим на экран монитора и умножаем на 100. И получим значение в процентах. После чего вместо процентов пишем vw (1% ширины окна).

То есть: 300/1366 = 0.2196193265 * 100 = 21.96% = 22vw (если округлить)

1
  • В текущем виде ваш ответ непонятен. Пожалуйста, нажмите править под сообщением, чтобы добавить больше подробностей, которые помогут другим понять, как он отвечает на заданный вопрос. Вы можете найти больше информации о том, как писать хорошие ответы в Справке. Commented 27 мар. 2022 в 3:04

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.