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

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

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

Answer 1

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

http://jsfiddle.net/dLmnX/2/

  #two {
    display: inline-block;
  }

如果将width指定为百分比，则它相对于父元素的大小。因为#two非常小，所以20％不会超过30px。设置为内联块的元素将尝试占用尽可能少的空间。