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の幅を制限してから、アイコンの絶対位置を使用できます。これは1つの方法ですが、状況を説明するために、コンテンツ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

あなたのouter-divと

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

2つのスパン要素については？

またはインライン：

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

オーバーフローを使用：hidden; テキストのオーバーフローを回避するため。

于 2013-01-08T23:41:57.610 に答える