【问题标题】:Using a percentage margin in CSS but want a minimum margin in pixels?在 CSS 中使用百分比边距但想要以像素为单位的最小边距?
【发布时间】:2011-09-15 02:11:37
【问题描述】:

我设置了一个margin: 0 33% 0 0;,但我还想确保边距至少是某个px 的数量。我知道 CSS 中没有 min-margin,所以我想知道这里是否有任何选项?

【问题讨论】:

  • 也许在您要设置边距的那个 div 的右侧使用一个空 div?设置宽度:33%;最小宽度:npx;对于第二个div?两个元素都包含在容器 div 中并浮动...不确定这是否可行...只是一个想法。

标签: css margin


【解决方案1】:

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

【讨论】:

    【解决方案2】:

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

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

    【讨论】:

    • 这种方法可以防止在父 div 中使用其他浮动元素和clear,因为这会导致布局被推到不需要的位置。解决此问题的方法是在上面的父 div 上设置 overflow:hidden,但这确实不是一厢情愿的场景,并且会限制 HTML 工具提示等元素的使用,因为这些元素可能会被非溢出的边界框截断div。
    • 您的意思是使用float:right 来表示第二个div
    【解决方案3】:

    你可以试试这个

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

    【讨论】:

      【解决方案4】:

      我知道游戏已经很晚了,但你试过了吗?

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

      20px你想要的至少一定数量的像素。所以边距将保持流动,但永远不会低于 20px

      希望对你有帮助!

      【讨论】:

      • 为什么marginmax() 值仅在我将其添加到调试工具时才有效,而在源样式文件中使用时无效?我的浏览器是 firefox,我正在使用 react-sass
      • @Sapinder 我不熟悉 SASS 或 react-sass,但从我搜索的内容来看,它们似乎还不支持 CSS max 功能。解决方法之一是使用 calc() 包装 max 函数。我已将此 CodePen 设为 POC codepen.io/ella301/pen/oNbMjvB 希望对您有所帮助!
      【解决方案5】:

      Carl Papworth,在这种情况下,你可以使用这个:

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

      【讨论】:

        【解决方案6】:

        这个怎么样?

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

        【讨论】:

        • 好吧,如果您使用的是 100% 宽度的主体,这将是一个问题,因为 x 轴上会溢出。现在你可以做一个“oveflow-x: hidden”,但是这会导致在调整大小时增加右 div 的裁剪。棘手!
        • @CarlPapworth ...或使用box-sizing: border-box; :)
        【解决方案7】:

        如果你使用span,那么你必须这样做:

        span{
        display:block;
        margin:auto;
        }
        

        working demo

        如果您使用的是div,那么您可以这样做:

        div{
          margin:auto;
        }
        

        【讨论】:

          【解决方案8】:

          我使用过上述几种解决方案,但在流畅且真正响应式的设置中,我认为最好的选择是在相应的容器/包装器上设置适当的填充。例子: 风格:

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

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

          也可以试试working demo

          【讨论】:

            【解决方案9】:

            您可以将您的项目保存在“容器”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;
            }
            

            【讨论】:

              【解决方案10】:

              据我了解,您可以在元素周围放置一个 div,用于定义填充。外部元素的填充就像内部元素的边距。

              假设您至少需要 1px 的边距:

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

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

              【讨论】:

                【解决方案11】:

                还可以测试屏幕宽度/高度的某个百分比是否小于以像素为单位的长度。

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

                【讨论】:

                  猜你喜欢
                  • 2012-11-11
                  • 2012-02-15
                  • 1970-01-01
                  • 2017-06-21
                  • 2012-01-27
                  • 1970-01-01
                  • 2015-08-12
                  • 1970-01-01
                  • 1970-01-01
                  相关资源
                  最近更新 更多