Html 强制div不调整其他元素的位置

这是一个难以用语言表达的问题，因此我认为应该进行一次实际的演示

我有一组html元素：

<div class="outer-div">                  // Container
  <div class="content-div"></div>        // Text goes into this element
  <span class="clear-button"></span>     // BG image for this is a 16x16 icon
  <span class="select-button"></span>    // BG image for this is a 16x16 icon
</div>

文本被添加到content div中，对于少量文本来说效果很好，例如：

但如果添加更多文本，则会发生以下情况：

---

我一直在绞尽脑汁试图找到一种方法来阻止那些图标从它们的位置移动，但我无法解决这个问题。理想情况下，我希望div垂直扩展，但是将溢出文本隐藏也可以。外部div宽度可能会有所不同。

您可以限制内容div的宽度，然后对图标使用绝对定位。这是一种方法，但为了解释您的情况，您没有为contentdiv定义特定的宽度，也没有清除容器中的浮动。这就是事情破裂的原因。您可以尝试以下方法：

div.select-div {
  background-color: white;
  border: 1px solid #CCC;
  vertical-align: middle;
  margin-bottom: 10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  height: 20px;
  width:200px;
  padding: 4px 6px;
  position:relative;
}

div.content-div {
  background-color: white;
  vertical-align: middle;
  font-size: 14px;
  color: #555;
  height: 20px;
  width: 160px;
}

span.select-button {
  cursor: pointer;
  display: inline-block;
  position:absolute;
  top:2px;
  right:38px;
  width: 16px;
  height: 16px;
  background-color: red; // for testing simplicity, this would be a bg image
}

span.clear-button {
  cursor: pointer;
  display: inline-block;
  width: 16px;
  height: 16px;
  position:absolute;
  top:2px;
  right:18px;
  background-color: black; // for testing simplicity, this would be a bg image
}

这将导致容器垂直展开以适应内容。如果不需要，可以限制内部内容的高度并隐藏溢出。

如果使用

position:relative

为了你的外太空舱和

position:absolute ; 
top:0; 
right:0;
display: block;

对于两个跨度元素

或内联：

<div class="outer-div" style="position: relative; background: #000000; height: 400px;">
    <div class="content-div" position: absolute; top: 0; left: 0; display: block; width: 200px; height: 30px;">
    <span class="clear-button" style="position: absolute; top: 0; right: 0; display: block; background: yourimage.png; width: 30px; height: 30px;"></span>
    <span class="select-button" style="position: absolute; top: 0; right: 0; display: block; background: yourimage.png; width: 30px; height: 30px;"></span>
</div>

至少一个跨度图元需要非零偏移（右）。否则它们会互相叠加
<div class="outer-div" style="position: relative; background: #000000; height: 400px;">
    <div class="content-div" position: absolute; top: 0; left: 0; display: block; width: 200px; height: 30px;">
    <span class="clear-button" style="position: absolute; top: 0; right: 0; display: block; background: yourimage.png; width: 30px; height: 30px;"></span>
    <span class="select-button" style="position: absolute; top: 0; right: 0; display: block; background: yourimage.png; width: 30px; height: 30px;"></span>
</div>