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