Question

我正在努力解决一个看似简单的问题：

我的代码：

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

Answer 1

为了使这项工作：

删除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，其中包装问题已修复且水平滚动条已废除。

供参考：

Answer 2

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

Answer 3

div element默认为display:block;，因此您需要更改其显示。

您应该从width:100%;课程中删除.wrapper，然后您可以display:inline-block;或display:table;

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

出现问题，因为默认情况下，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

Answer 5

您可以使用以下css解决问题：

＆＃13;

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

＆＃13;

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

＆＃13;

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

为什么包装器不会包裹子div

问题是所有html元素都有一些默认的CSS样式，由浏览器应用。

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

正如您所见：snapshot of chrome dev tools

*红色矩形中突出显示的css样式是浏览器应用的默认样式。

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

**当我们参与其中时，我想指出您可能遇到的前一个代码的另一个问题，如果目标是让wrapper完全包裹box倍。

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

＆＃13;

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

＆＃13;

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

＆＃13;

正如您所看到的，box试图抓住wrapper的一面。

您可以在此处详细了解display css属性：CSS display property || CSS-Tricks

为什么没有包装盒包裹？

5 个答案: