为什么包装纸不能包装在盒子里？

我的代码：

<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中查看问题。

来源

2016-07-05 Fuxi

怎么样最小宽度：100％;而不是宽度：100％？ – AlexisWbr

.box div的宽度应该总是恰好为1100px，还是应该在较小的屏幕上缩小？ – j08691

@Fuxi查看我的答案。它会解决你的问题。 –

在包装上使用display:inline-block来根据里面的内容调整容器的大小。

来源

2016-07-05 14:50:00

为了使这项工作：

删除width: 100%，并加入到包装display: inline-block。
这样做，将使包装具有尽可能多的宽度来包装盒子。把width: 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，既修补了包装问题，并废除了水平滚动条。

仅供参考：

来源

2016-07-05 14:53:00

哇。很棒的水平滚动条:) – dippas

OP可能需要水平滚动条。 @dippas。没有另行说明。 –

你真的想滚动移动？ – dippas

的div element默认有display:block;，所以你需要改变它的显示器。

你应该从.wrapper类中删除width:100%;，那么你可以把它display:inline-block;或display:table;

*{ 
 
     font-family:tahoma; 
 
    } 
 
    body{ 
 
     background:#333; 
 
    } 
 
    .wrapper 
 
    { 
 
     padding:10px; 
 
     background:white; 
 
     display:inline-block; 
 
    } 
 
    .box 
 
    { 
 
     margin-top:40px; 
 
     width:1100px; 
 
     height:400px; 
 
     background:#aaa; 
 
    }

<div class="wrapper"> 
 
    <div class="box"> 
 
     box 
 
    </div> 
 
</div>

来源

2016-07-05 14:55:28

出现你的问题，因为HTML文档，默认情况下，显示所有元素display: block。有两种方法可以做到这一点，因为我们的朋友之前提到过。

第一种是使用inline-block价值为display属性：

body{ 
    display: inline-block; 
}

第二种方法是使用max-width：

div.wrapper{ 
    max-width: 100%; 
    /*we have set height property to auto to have coefficient between width & height*/ 
    height: auto; 
}

欲了解更多信息，请访问以下网页：

inline-block

max-width

来源

2016-07-05 15:03:35 Diesel

您可以使用下面的CSS解决问题：

* { 
 
    font-family: tahoma; 
 
} 
 
body { 
 
    background: #333; 
 
} 
 
.wrapper { 
 
    padding: 10px; 
 
    background: white; 
 
    display: inline-block; 
 
} 
 
.box { 
 
    margin-top: 40px; 
 
    width: 1100px; 
 
    height: 400px; 
 
    background: #aaa; 
 
}

<div class="wrapper"> 
 
    <div class="box"> 
 
    box 
 
    </div> 
 
</div>

唯一的变化是我已经加入到display: inline-block元素.wrapper。

为什么包装不围绕孩子的div

问题包是所有的HTML元素都有它获取浏览器应用了一些默认的CSS样式。

在这种情况下，div获得默认属性display: block;这是相同的属性，使默认的无风格的div占用其父元素的完整可用宽度。

正如你可以用这个看到：snapshot of chrome dev tools

*红色矩形突出的CSS样式是由浏览器应用的默认样式。

*红色下划线文字告诉我们元素的宽度。淡出表示该属性的值由浏览器计算。

**虽然我们在此，但我想指出您可能遇到的以前的代码所面临的另一个问题，并且目标是让wrapper始终包装box。

如果.box div的宽度远小于浏览器宽度的宽度，那么可能会出现另一个问题，我在下面的代码片段中显示了这个问题。

 * { 
 
     font-family: tahoma; 
 
    } 
 
    
 
    body { 
 
     background: #333; 
 
    } 
 
    
 
    .wrapper { 
 
     padding: 10px; 
 
     background: white; 
 
    } 
 
    
 
    .box { 
 
     margin-top: 40px; 
 
     width: 100px; 
 
     height: 400px; 
 
     background: #aaa; 
 
    }

<div class="wrapper"> 
 
    <div class="box"> 
 
    box 
 
    </div> 
 
</div>

正如你可以看到box试图抱住的wrapper侧。

你可以阅读更多关于display CSS属性在这里：CSS display property || CSS-Tricks

来源

2016-07-05 16:04:32

为什么包装纸不能包装在盒子里？

回答

相关问题