Используя процентную маржу в CSS, но хотите минимальный запас в пикселях?

Я установил margin: 0 33% 0 0;, но я также хотел бы убедиться, что маржа составляет хотя бы определенную сумму px. Я знаю, что в CSS нет min-margin, поэтому мне было интересно, есть ли у меня какие-либо опции здесь?

Ответ 1

Поместите a div с помощью% width и статического min-width справа от вашего элемента.

<div style="position:relative; float:left; margin:0">
<div style="position:relative; float:left; width:33%; min-width:200px">

Ответ 2

Истинное решение здесь - использовать точку прерывания медиа-запроса, чтобы определить, когда 33% больше не работает для вас и должно быть переопределено минимальным запасом в пикселях.

/*Margin by percentage:*/
div{
    margin: 0 33% 0 0;
}

/*Margin by pixel:*/
@media screen and ( max-width: 200px ){
    div{
        margin: 0 15px 0 0;
    }
}

В приведенном выше коде измените max-width на любую ширину экрана, правый правый край 33% больше не работает для вас.

Ответ 3

вы можете попробовать это

.mm:before {
    content: "";
    display: inline-block;
    width: 33%;
    min-width: 200px;
}

Ответ 4

Карл Папуорт, в этом случае вы можете использовать это:

body {margin-left: 60px; margin-right: 60px; width:calc(100%-120px); }
div#container {width:33%;}

Ответ 5

Как насчет этого?

body {margin-left: 60px; margin-right: 60px; }
div#container {width:33%;}

Ответ 6

если вы используете span, чем у, выполните следующие действия:

span{
display:block;
margin:auto;
}

рабочая демонстрация

если вы используете div, чем вы можете сделать это:

div{
  margin:auto;
}

Ответ 7

Я играл с несколькими вышеупомянутыми решениями, но в жидкой и действительно отзывчивой настройке я считаю, что лучшим вариантом является установка правильного заполнения на соответствующем контейнере/обертке. Пример: Стиль:

 html {
   background-color: #fff;
   padding: 0 4em;
 }
 body {
   margin: 0 auto;
   max-width: 42em;
   background-color: #ddf;
 }

Теперь поиграйте с различными ширинами окон, а также попробуйте различные размеры шрифтов.

Также попробуйте рабочую демонстрацию.

Ответ 8

Вы можете хранить свои элементы в "контейнере" div и установить для отступа значение "min-margin", которое вы хотели бы иметь. Это может быть не совсем то, что вы ищете, но это дает вам ощущение минимального размера поля.

<div class="container">
   <div class="your_div_with_items">
   'items'
   </div>
</div>

Тогда CSS:

.container
{
   padding: 0 'min_margin_ammount' 0 0;
}

.your_div_with_items
{
   margin: 0 33% 0 0;
}

Ответ 9

Насколько я понимаю, вы можете поместить div вокруг вашего элемента, который определяет отступ. Заполнение внешнего элемента похоже на поле внутреннего элемента.

Представьте, что вы хотите по крайней мере маржу в 1 пиксель:

<div style="padding:1px">
  <div style="margin: 0 33% 0 0;">
      interesting content
  </div>
</div>

редактировать: это как ответ Imigas, но я думаю, что легче понять.

Ответ 10

Также возможно проверить, меньше ли определенный процент ширины/высоты экрана, чем длина в пикселях.

Вот простое решение для этого с помощью JavaScript:

<body>
 <div id="demo">
  <p> Hello World! </p>
 </div>

 <script>
  if (((window.innerWidth / 100) * 33) < 250) { /* Gets 33% of window width in pixels, tests if it is less than required minimum length (250px) */
  document.getElementById("demo").style.margin = "0 250px 0 0" /* If true, set margin to length in pixels */
  } else {
   document.getElementById("demo").style.margin = "0 33% 0 0" /* If not true, the widow is big enough and percentage length is set */
   }
 </script>
</body>