强制div不调整其他元素定位

Question

这是一个难以理解的问题，因此我认为实际演示是有序的。

我有一些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>

哪个使用这个css：

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;
  padding: 4px 6px;
}

div.content-div {
  float: left;
  overflow: hidden;
  background-color: white;
  vertical-align: middle;
  font-size: 14px;
  color: #555;
  height: 20px;
  width: auto;
}

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

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

文本被添加到内容div中，并且适用于少量文本，例如：

但如果你添加更多文字，就会发生这种情况：

我一直在撕扯我的头发试图找到一种方法来阻止那些图标从​​他们的位置移开，但我无法解决它。理想情况下，我希望div垂直扩展，但只是隐藏溢出文本也没关系。外部div的宽度可能会有所不同。

Answer 1

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

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
}

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

Answer 2

如果您使用

怎么办？

position:relative

表示你的外部div和

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

对于两个span元素？

或内联：

<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>

使用     溢出：隐藏; 避免文字溢出。