1

这是一个很难用语言表达的问题，所以我认为需要进行实际演示。

我有一组 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 宽度可能会有所不同。

4

2 回答 2

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
}

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

于 2013-01-08T23:29:56.973 回答
1

如果你使用

position:relative

对于您的外部 div 和

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>

使用溢出：隐藏；以避免文本溢出。

于 2013-01-08T23:41:57.610 回答