内嵌块溢出容器外

时间：2016-03-16 16:50:50

标签： css containers

我有一个容器，我不想设置为内联块，并且包含内联块元素。 这些元素将溢出容器而不是扩展它。 如何设法阻止此行为？

Demo 

#inline-block-container {
background-color: red;
white-space:nowrap;
}

.inline-block-element {
background-color: blue;
width: 50px;
height: 30px;
margin: 10px;
display:inline-block;
}

在这个演示中，我希望红色矩形扩展（甚至在视口之外）以包含（视觉上）所有蓝色矩形。

- 编辑 -

在我的真实页面上： Display

您可以看到停在窗口右边界的背景（渐变浅灰色）（向右滚动之前）。 还有一个错误定位的引导工具提示（黑色）和上下文菜单相同。 容器，正文和html标记在初始视图之外不会出现，因为内联块元素溢出其容器之外。

我无法在css中设置大小，因为元素（dimgray）的内容可能会发生变化。

我尝试将容器设置为display：table：相同的结果。 我尝试过的位置：绝对：它会制动东西并且不能解决问题。 我试过inline-flex：结果相同。

提前致谢。

致以最诚挚的问候，

1 个答案:

答案 0 :(得分：5)

绝对定位父div将启用此功能，但这可能不适合您的要求。

#inline-block-container {
  background-color: red;
  white-space: nowrap;
  position: absolute;
  width: auto;
}

＆＃13;
＆＃13; 
#inline-block-container {
  background-color: red;
  white-space: nowrap;
  position: absolute;
  width: auto;
}
.inline-block-element {
  background-color: blue;
  width: 50px;
  height: 30px;
  margin: 10px;
  display: inline-block;
}
＆＃13; 
<div id="inline-block-container">
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

或者正如Nenad Vracar所提到的...... display:table 

#inline-block-container {
  background-color: red;
  white-space: nowrap;
  display: table;
  width: auto;
}

＆＃13;
＆＃13; 
#inline-block-container {
  background-color: red;
  white-space: nowrap;
  display: table;
  width: auto;
}
.inline-block-element {
  background-color: blue;
  width: 50px;
  height: 30px;
  margin: 10px;
  display: inline-block;
}
＆＃13; 
<div id="inline-block-container">
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

或者正如Nenad Vracar所提到的...... display:inline-flex 

#inline-block-container {
  background-color: red;
  white-space: nowrap;
  display: inline-flex;
  width: auto;
}

＆＃13;
＆＃13; 
#inline-block-container {
  background-color: red;
  white-space: nowrap;
  display: inline-flex;
  width: auto;
}
.inline-block-element {
  background-color: blue;
  width: 50px;
  height: 30px;
  margin: 10px;
  display: inline-block;
}
＆＃13; 
<div id="inline-block-container">
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

从本质上讲，这些方法实际上indistinguishable使用display:inline-block，而且＃34;缩小以适应＆＃34;属性。行框和white-space:nowrap的工作方式基本相同，以保持背景颜色。

了解您反对inline-block的原因将大大有助于找出最合适的选择。

相关问题
最新问题