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

【问题标题】：Setting div width as % with min-width is not working. Min-width always wins.使用 min-width 将 div 宽度设置为 % 不起作用。最小宽度总是赢。
【发布时间】：2013-01-24 22:06:40
【问题描述】：

我的宽度有问题：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;        
  }

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

【问题讨论】：

您使用 div id #shuffle1 的次数过多。改为上课.shuffle1
id (#idName) 对于当前 HTML 文档必须是唯一的，而 class (.className) 可以根据需要多次重复使用。 #shuffle1和#two都被多次使用，这是不允许的。
谢谢！这只是不好的做法吗？还是会影响页面的结果？
它使文档无效。它不会影响 CSS，但如果您将 ids 用作 JavaScript 的钩子（例如 document.getElementById('two') -- 它会选择哪个？），则会引起很多混乱。

标签： html width aspect-ratio css

【解决方案1】：

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

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

  #two {
    display: inline-block;
  }

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

【讨论】：

OMG StackOverflow 很棒。非常感谢！
另外，你怎么知道#two 很小？我想如果我有一个 div 并且没有指定宽度或高度，它不会影响其中任何东西的大小。这不正确吗？
我知道#two 很小，因为它的孩子很小，而且它的孩子有一个以百分比定义的宽度。我也可以在浏览器中使用 DOM 检查器。未指定宽度时元素的宽度取决于显示类型。就像我说的那样，inline-block 的元素会尝试占用尽可能少的水平空间。