21

私は数か月間 css を行っていないので、簡単なことを見落としているかもしれませんが、解決策が何であれ、私はそれを理解できませんでした。ここに問題があります。

これが私のコードの簡略版です：

<div id="wrapper" style="position: fixed; overflow: hidden; height: 100%; width: 200px;">
  <div id="test" style="position: absolute; margin-left: -200px;"></div>
</div>

基本的に、外側の div ラッパーの外側で 200px を左に拡張するには、内側の div テストが必要です。問題は、私のラッパーがoverflow:hiddenであり、外に出られないことです。ただし、使用している js プラグインが原因で、overflow:hidden のままにする必要があります。

回避策はありますか？ありがとう

4

5 に答える 5

16

唯一のオプションは、その div を div の外に移動することoverflow:hiddenです。この div のオーバーフローするすべてを非表示にすることはできません。この 1 つの div を除いて... 例外を作成しましょう。

階層にもう 1 つのレイヤーを導入できます。これにより、内側の div はオーバーフローで非表示になり、外側の div は非表示になります。次に、その配置された要素を外側の div に配置します。疑似例は次のようになります。

<div class="outer">
  <div class="inner" style="overflow: hidden;">
    ....
  </div>

  <div class="abs-positioned">
  </div>
</div>

たまたま で古い div に配置していた場合はoverflow:hidden、その設定をouterdiv に移動して、適切に配置できるようにします。

簡単に言えば、CSS を変更せずに、またはマークアップを変更せずに、やりたいことを実行できるソリューションはありませんoverflow:hidden。

于 2013-03-15T17:45:38.280 に答える
15

Piyas De の拡張:

例

オーバーフローが非表示になっている場合、

position: relative

その後、それは動作しません

動作しない例

于 2013-12-19T00:54:39.723 に答える
3

何かのようなもの -

<div id="textChange" style="overflow:hidden; padding-left:250px;">This is wrapper Div
This is wrapper Div<br/>
This is wrapper Div<br/>
<div id="textChange1" style="position:absolute;left:50; top: 50;">
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
</div>
This is wrapper Div<br/>
This is wrapper Div<br/>
This is wrapper Div<br/>
</div>

あなたの問題を解決するかもしれません。

見てください..それが役立つかどうか...

于 2013-03-15T17:52:51.943 に答える