Используете процентное поле в CSS, но хотите минимальное поле в пикселях? - PullRequest
Новая
       1

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

35 голосов
/ 15 июня 2011

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

Ответы [ 10 ]

30 голосов
/ 23 января 2016

Истинным решением здесь является использование точки останова медиа-запроса, чтобы определить, когда 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%.

19 голосов
/ 04 декабря 2013

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

.mm:before {
    content: "";
    display: inline-block;
    width: 33%;
    min-width: 200px;
}
19 голосов
/ 15 июня 2011

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

<div style="position:relative; float:left; margin:0">
<div style="position:relative; float:left; width:33%; min-width:200px">
4 голосов
/ 09 октября 2015

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

body {margin-left: 60px; margin-right: 60px; width:calc(100%-120px); }
div#container {width:33%;}
1 голос
/ 22 марта 2016

, если вы используете span, чем вы должны поступить следующим образом: 

span{
display:block;
margin:auto;
}

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

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

div{
  margin:auto;
}
1 голос
/ 23 июня 2011

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

body {margin-left: 60px; margin-right: 60px; }
div#container {width:33%;}
0 голосов
/ 04 февраля 2019

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

Вот простое решение для этого с использованием 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>
0 голосов
/ 02 сентября 2018

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

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

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

edit: это похоже на ответ Imigas, но ядумаю, что легче понять.

0 голосов
/ 03 августа 2018

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

<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;
}
0 голосов
/ 29 сентября 2016

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

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

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

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

...