3

私は本質的に（ある種の）ウィンドウに変えたいdiv要素を持っています。基本的に、その div 要素内には、「ウィンドウ」(div 要素) のビュー ポートを超えるコンテンツがあります。これが私が達成しようとしていることの写真です：

やりたいことのイメージ

ここで、固定サイズの div 要素を作成してみましたoverflow: hidden。問題は (これまでクロムでしかテストしていません)、内側の要素の 1 つがオーバーフロー領域内に 100%収まらなくなると、その要素が消えることです。

私が何を意味するかを知るために、別の写真を添付し​​ました：

発生している問題

右側の青緑色の部分が欠けていることに注意してください (黄色の左側にある白いスペースについては申し訳ありません。これは私のトリミングの失敗です)。

これはハックなことをしなくても解決できる問題ですか (「ウィンドウ」ボックスの幅を広げてから、その新しい領域を非表示にするために別のボックスを右側に絶対配置するなど)?

編集質問には回答がありましたが、私が達成しようとしていたことを誰もが確認できるフィドルは次のとおりです: http://jsfiddle.net/MRnL6/1/

ありがとう！

4

4 に答える 4

4

私はあなたが何を得ているのか理解していると思います。親コンテナが要素を保持していないため、要素が次の行にドロップダウンしていると思います。ウィンドウ内にコンテナを作成して、そのすべての子と同じ幅の要素を含めてみてください。たとえば、このフィドルを参照してください。

HTML:

<div id="window">
    <div id="container">
        <div class="elem one"></div>
        <div class="elem two"></div>
        <div class="elem three"></div>
        <div class="elem four"></div>
    </div>
</div>

そしてCSS：

#window {
    height: 100px;
    overflow: hidden;
    width: 250px;
}
#container {
    width: 400px;
}
.elem {
    height: 100px;
    float: left;
    width: 100px;
}
.one {
    background: #0f0;
}
.two {
    background: #f0f;
}
.three {
    background: #ff0;
}
.four {
    background: #0ff;
}
于 2013-09-20T21:46:34.683 に答える
-1

最も簡単なオプションは、オーバーフローするのではなく、すべてが収まるように内側の部分のスタイルを変更することです。

このデモを見る

#container{
 width:400px;
 height:100px;
 border:5px solid gray;
 margin:10px;
}
.test{
 display:inline-block;
 width:25%;
 height:100%;
}
于 2013-09-20T21:51:35.743 に答える