当前位置：文江博客话题详情

在 CSS 中使用百分比边距但想要最小边距（以像素为单位）？

发布于 2024-11-15 14:11:44 字数 139 浏览 0 评论 0原文

我已经设置了 margin: 0 33% 0 0; 但我还想确保边距至少某个 px 金额。我知道 CSS 中没有 min-margin 所以我想知道这里是否有任何选项？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

请远离我 2024-11-22 14:11:44

这里真正的解决方案是使用媒体查询断点来确定 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% 的右边距不再适合您。

The true solution here is to use a media query break-point to determine when 33% no longer works for you and should be overridden by the minimum margin in pixels.

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

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

In the above code, change the max-width to whatever screen width the 33% right margin no longer works for you.

回复收藏 0 原文

机场等船 2024-11-22 14:11:44

在元素右侧放置一个带有 % width 和静态 min-width 的 div 。

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

Place a div with a % width and a static min-width to the right of your element.

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

回复收藏 0 原文

七七 2024-11-22 14:11:44

你可以试试这个

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

you can try this

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

回复收藏 0 原文

明月夜 2024-11-22 14:11:44

我知道游戏已经很晚了，但是你尝试过吗？

margin: 0 max(33%, 20px) 0 0

其中 20px 是您想要的至少一定数量的像素。因此边距将保持流动，但永远不会低于20px。

希望有帮助！

I know it's late in the game, but have you tried this?

margin: 0 max(33%, 20px) 0 0

where 20px is whatever you want to be at least a certain number of pixels. So the margin will stay fluid but will never fall under 20px.

Hope it helps!

回复收藏 0 原文

春风十里 2024-11-22 14:11:44

你可以使用这样的东西：

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

You may use something like this:

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

回复收藏 0 原文

迷雾森÷林ヴ 2024-11-22 14:11:44

这个怎么样？

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

How about this?

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

回复收藏 0 原文

过度放纵 2024-11-22 14:11:44

如果您使用 span ，那么您必须这样做：

span{
display:block;
margin:auto;
}

工作演示

如果你使用 div ，你可以这样做：

div{
  margin:auto;
}

if you are using span than u have to do like this :

span{
display:block;
margin:auto;
}

working demo

if you are using div than u can do this :

div{
  margin:auto;
}

回复收藏 0 原文

天赋异禀 2024-11-22 14:11:44

我已经使用了上述几个解决方案，但在流畅且真正响应的设置中，我相信最好的选择是在相应的容器/包装器上设置适当的填充。例子：
样式：

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

现在尝试各种窗口宽度，并尝试各种字体大小。

另请尝试工作演示。

I've played with a couple of the aforementioned solutions, but in a fluid and truly responsive setting, I believe the best option is to set the proper padding on the respective container/wrapper. Example:
Style:

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

Now play around with various window widths, and also try various font sizes.

Also try the working demo.

回复收藏 0 原文

阳光①夏 2024-11-22 14:11:44

您可以将您的项目保存在“容器”div 中，并将填充设置为您想要的“最小边距”。它可能不完全是您正在寻找的，但它给您一种最小边距大小的感觉。

<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;
}

You could keep your items in a "container" div and set a padding exact to "min-margin" you'd like to have. It might not be exactly what you're looking for, but it gives you that sense of minimum margin size.

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

Then the CSS:

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

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

回复收藏 0 原文

世界如花海般美丽 2024-11-22 14:11:44

据我了解，您可以在元素周围放置一个 div，它定义了填充。外部元素的填充类似于内部元素的边距。

想象一下你至少想要 1px 的边距：

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

编辑：这就像 Imigas 的答案，但我认为更容易理解。

As far as I understand, you can place a div around your element, that defines a padding. A padding of an outer element is like the margin of an inner element.

Imagine you want at least a margin of 1px:

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

edit: this is like Imigas's answer, but I think easier to understand.

回复收藏 0 原文

层林尽染 2024-11-22 14:11:44

还可以测试屏幕宽度/高度的一定百分比是否小于像素长度。

下面是一个使用 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>

It is also possible to test if a certain percentage of the screen width/height is smaller than a length in pixels.

Here is a simple solution for this using 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 原文

~没有更多了~