html – 为什么包装器没有环绕盒子？

概述我正在努力解决一个看似简单的问题： 我的代码： <style> *{ font-family:tahoma; } body{ background:#333; } .wrapper { padding:10px; background:white; width:100%; 我正在努力解决一个看似简单的问题：

我的代码：

<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 >    <div >        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,包装问题修复和水平滚动条废除.

以供参考：

> display: inline-block;
> box-sizing: border-box;

总结

以上是内存溢出为你收集整理的html – 为什么包装器没有环绕盒子？全部内容，希望文章能够帮你解决html – 为什么包装器没有环绕盒子？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。