代码之家 › 专栏 › 技术社区 › Spiralio

当父级太小时防止div包装

css html javascript

Spiralio · 技术社区 · 6 年前

如何阻止父div中的div包装,而不是被切断?

代码:

var slider = document.getElementById("slider"),
    cont1 = document.getElementById("container1"),
    cont2 = document.getElementById("container2");

slider.addEventListener("input", function() {
    cont1.style.width = slider.value + "px";
    cont2.style.width = slider.value + "px";
}, false);

#item {
  width: 100px; 
  height: 100px;  
  float: left;
}

.container {
   height: 100px; 
   background-color: #ccc; 
}

<p>use slider to change width of the container</p>
<input id="slider" type="range" max="500">
<p>overflow: hidden</p>
<div class="container" id="container1" style="width: 300px; overflow: hidden;">
  <div id="item" style="background-color: red;"></div>
  <div id="item" style="background-color: green;"></div>
</div>

<p>overflow: visible</p>
<div class="container" id="container2" style="width: 300px; overflow: visible;">
  <div id="item" style="background-color: red;"></div>
  <div id="item" style="background-color: green;"></div>
</div>

jsfiddle

正如你所看到的,当我改变父div的大小时,div在wrap中。经过搜索,我找到了两个解决方案。其中一个需要为容器设置宽度,方法是使用绝对定位div。另一个用的 white-space: none ,但没有运气。

2 回复 | 直到 6 年前

Temani Afif 6 年前

而不是浮点数 inline-block 你将能够使用 with-space 诀窍:

var slider = document.getElementById("slider"),
  cont1 = document.getElementById("container1"),
  cont2 = document.getElementById("container2");

slider.addEventListener("input", function() {
  cont1.style.width = slider.value + "px";
  cont2.style.width = slider.value + "px";
}, false);

#item {
  width: 100px;
  height: 100px;
  display: inline-block;
}

.container {
  height: 100px;
  background-color: #ccc;
  white-space: nowrap;
  font-size: 0; /*to avoid white-space between inline-block*/
}

<p>use slider to change width of the container</p>
<input id="slider" type="range" max="500">
<p>overflow: hidden</p>
<div class="container" id="container1" style="width: 300px; overflow: hidden;">
  <div id="item" style="background-color: red;"></div>
  <div id="item" style="background-color: green;"></div>
</div>

<p>overflow: visible</p>
<div class="container" id="container2" style="width: 300px; overflow: visible;">
  <div id="item" style="background-color: red;"></div>
  <div id="item" style="background-color: green;"></div>
</div>

-2

Obsidian Age 6 年前

如果我正确理解你的意图,你希望灰色滑块“淡入”绿色方块,让绿色方块留在原地。

为此,您需要合并 overflow: hidden 与 position: absolute 以下内容:

var slider = document.getElementById("slider");
var cont1 = document.getElementById("container1");

slider.addEventListener("input", function() {
  cont1.style.width = slider.value + "px";
}, false);

#green {
  position: absolute;
  left: calc(100px + 8px); /* Red offset + body margin */
}

.item {
  width: 100px;
  height: 100px;
  float: left;
}

.container {
  height: 100px;
  background-color: #ccc;
}

<p>use slider to change width of the container</p>
<input id="slider" type="range" max="500">
<div class="container" id="container1" style="width: 300px; overflow: hidden;">
  <div class="item" style="background-color: red;"></div>
  <div id="green" class="item" style="background-color: green;"></div>
</div>

请注意,您提供的代码也有重复的 #item ID,这是无效标记。在上面的例子中,我已经将这些更改为类。