html - 使用 min-width 将 div 宽度设置为 % 不起作用。最小宽度总是赢。

Question

我的宽度有问题：20%；被我的最小宽度覆盖：30px；（参见css框中的第22和23行：http: //jsfiddle.net/dLmnX/）

我也是第一次使用纵横比：我从http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio中挑选并切碎了代码。

代码的纵横比部分：

  #aspect {
      padding-top: 120%; /* aspect ratio */
  }

似乎工作正常，它只是这个 div 中的宽度：

  #shuffle1 {
    display: inline-block;
    margin: 0px auto;
    position: relative;
    width: 20%;
    min-width: 30px;        
  }

任何帮助都会很棒！谢谢你。

score 0 · Accepted Answer

罪魁祸首是#two元素的样式。

  #two {
    display: inline-block;
  }

当您将宽度指定为百分比时，它是相对于父元素的大小。因为#two非常小，所以 20% 不可能大于 30px。设置为 inline-block 的元素将尝试占用尽可能少的空间。

1 回答 1