css - 让孩子填补父母，而不会变得迟钝

Question

我正在尝试使我的标题框与我的图像大小相同，而不会失去弹性滑块的响应能力，有什么建议吗？

http://jsfiddle.net/bmBnF/10/

麦德斯 K

Answer 1

我通过使其成为内联块并使用绝对定位来修复它。这样一来，您就不再需要正确浮动它了。另外，我添加了边框框的东西，所以你的填充不会使框太大。display:inline-block;和border-box一起使响应式设计中的CSS定位更加容易。

  .flex-caption {position:absolute;display:inline-block;min-height:100%;width: 26%; padding: 2%; margin: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 14px; line-height: 18px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; }

这里有一个关于边界框的不错的小教程：http: //css-tricks.com/box-sizing/