问题描述
|
我设置了“ 0”,但是我还要确保保证金至少是一定的“ 1”。我知道CSS中没有ѭ2so,所以我想知道这里是否有任何选择?
解决方法
将
div
和%width
和一个静态min-width
放置在元素右侧。
<div style=\"position:relative; float:left; margin:0\">
<div style=\"position:relative; float:left; width:33%; min-width:200px\">
, 真正的解决方案是使用媒体查询断点来确定何时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;
}
}
在上面的代码中,将ѭ8更改为33%右边距不再适合您的任何屏幕宽度。
, 你可以试试这个
.mm:before {
content: \"\";
display: inline-block;
width: 33%;
min-width: 200px;
}
, 卡尔·帕普沃思(Carl Papworth),在这种情况下,您可以使用以下方法:
body {margin-left: 60px; margin-right: 60px; width:calc(100%-120px); }
div#container {width:33%;}
, 如果您使用的是span
,那么您必须这样做:
span{
display:block;
margin:auto;
}
工作演示
如果您使用的是div
,那么您可以执行以下操作:
div{
margin:auto;
}
, 这个怎么样?
body {margin-left: 60px; margin-right: 60px; }
div#container {width:33%;}
, 我已经使用了前面提到的几种解决方案,但是在流畅,真正响应的环境中,我认为最好的选择是在相应的容器/包装纸上设置适当的填充物。例:
样式:
html {
background-color: #fff;
padding: 0 4em;
}
body {
margin: 0 auto;
max-width: 42em;
background-color: #ddf;
}
现在尝试各种窗口宽度,并尝试各种字体大小。
也尝试工作演示。
, 您可以将项目保留在\“ container \” 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;
}
, 据我了解,您可以在元素周围放置一个div,以定义填充。外部元素的填充就像内部元素的空白。
假设您希望至少有1px的边距:
<div style=\"padding:1px\">
<div style=\"margin: 0 33% 0 0;\">
interesting content
</div>
</div>
编辑:这就像伊米加斯的答案,但我认为更容易理解。
, 还可以测试屏幕宽度/高度的某个百分比是否小于以像素为单位的长度。
这是使用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>