4

Можно ли найти 60 процентов от значения - calc(100% - 300px)?

пробовал так, но пока безрезультатно:

width = 0.6 * calc(100% - 300px)

/////////////////////////////////////////////////////

Вопрос: Почему это не действует в таблицах с td? Синяя ячейка должна быть явно больше, чем зеленая. введите сюда описание изображения

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <style type="text/css">
    table{
      width: 100%;
    }
    td{
      padding-top: 30px;
    }
    .td_1{
      width: calc(calc(100% - 400px) * 0.9);
    }
    .td_2{
      width: calc(calc(100% - 400px) * 0.1);
    }
  </style>
 </head>
 <body>
  <table cellspacing = "0">
    <tr>
      <td colspan="2", bgcolor="black"></td>
      <td colspan="2", bgcolor="red"></td>
    </tr>
    <tr>
      <td width="200px", bgcolor="yellow"></td>
      <td class="td_1", bgcolor="blue"></td>
      <td class="td_2", bgcolor="green"></td>
      <td width="200px", bgcolor="orange"></td>
    </tr>
  </table> 
 </body>
</html>
6
  • Ну, так всё выражение надо ещё в один calc() обернуть, не?
    – UModeL
    17 мар 2021 в 12:47
  • @UModeL делал так, тоже самое получается
    – thisdemon
    17 мар 2021 в 12:50
  • 2
    похоже, что Вы делали как-то не так.
    – UModeL
    17 мар 2021 в 12:55
  • @UModeL я пробовал дать больше приоритетности td расположенным по центру, все равно не выходит
    – thisdemon
    23 мар 2021 в 3:28
  • таблицы - это совершенно другой случай. И другой вопрос, соответственно.
    – UModeL
    23 мар 2021 в 4:21

2 ответа 2

8

div { box-shadow: inset 0 0 0 1px red; }
<div style="width: 100%;">width = 100%</div>
<div style="width: calc(100% - 300px);">width = calc(100% - 300px)</div>
<div style="width: calc(calc(100% - 300px) * 0.6);">width = calc(calc(100% - 300px) * 0.6)</div>

Ну или так:

div { box-shadow: inset 0 0 0 1px red; }
<div style="width: 100%;">width = 100%</div>
<div style="width: calc(100% - 300px);">width = calc(100% - 300px)</div>
<div style="width: calc((100% - 300px) * 0.6);">width = calc((100% - 300px) * 0.6)</div>

2

Добавлю вариант, которому всех нас учили ещё в школе =)

20 конфет - 100%
....?.... -  60%

20 конфет умножаем на 60% и делим на 100%.

div { box-shadow: inset 0 0 0 1px red; margin: 1px 0; }
<div style="width: 100%;">width = 100%</div>
<div style="width: calc(100% - 300px);">width = calc(100% - 300px)</div>
<div style="width: calc(calc(100% - 300px) * 60 / 100);">width = calc(calc(100% - 300px) * 60 / 100)</div>

1
  • @UModeL а если это использовать в таблицах, например с td, я пробовал сдвиги не получаются(укажу проблему в вопросе)
    – thisdemon
    23 мар 2021 в 3:03

Ваш ответ

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

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