我正在努力解决一个看似简单的问题:
我的代码:
<style> *{ font-family:tahoma; } body{ background:#333; } .wrapper { padding:10px; background:white; width:100%; } .box { margin-top:40px; width:1100px; height:400px; background:#aaa; } </style> <div class="wrapper"> <div class="box"> box </div> </div>
包装器中包含的盒子有一个固定的大小,可能会在小屏幕上溢出包装器.为什么包装纸不能缠在盒子周围?我该怎么办?
您也可以在this jsFiddle中查看问题.
解决方法
为了使这项工作:
>删除宽度:100%并添加到包装器显示:inline-block.
>这样做,将使包装器具有所需的宽度以包裹盒子.放宽:100%将包装限制在屏幕宽度上,如果包装盒的宽度大于屏幕宽度,则无法使用.
>如果您不想使用水平滚动条,尤其是在较窄的屏幕上,请使用:box-sizing:包装器上的border-box.
CSS:
.wrapper { display: inline-block; /* Ensures that the box stays wrapped */ padding: 10px; background: white; box-sizing: border-box; /* Ensures that there won't be a horizontal scrollbar */ }
这是你的jsFiddle的working version,包装问题修复和水平滚动条废除.
以供参考:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。