2

次のように、オプションで満たされたオプション ボックスがあります。

<div class="OptionBox">
  <div class="Option">
    <div class="AddRemoveIcon"></div>
    <img src="images/users/user_1000000002.jpg">
    <span class="Label">Student Name<span class="SubLabel">Student</span></span>
  </div>
  <div class="Option">...</div>
</div>

スタイルは次のようになります。

.OptionBox{
  overflow: auto;
  max-height: 200px;
  max-width:300px;
  display: inline-block;
}

.Option {
  display: block;
}

.Option .AddRemoveIcon,
.Option img,
.Option .Label {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}

vertical-align:middle が好きで、SubLabel スパンが常に存在するとは限らないため、インラインブロックを使用しています...しかし、この問題は float:left でも発生します...

私の問題は、[オプション] ボックスに十分なオプションがあり、overflow-y が発生する場合です。なんらかの理由で、ブラウザはサイズを正しく設定し (つまり、各オプションの幅を計算し、それに応じてオプション ボックスの幅を調整します)、スクロールバーを追加します。その結果、スクロールバーがオプション ボックスの幅から X ピクセルを削除したため、最も幅の広いオプションの Label div が 1 行下に移動します。オプションの子に対して float:left に切り替えると、スクロールバーに基づいて Label div がラップされます。いずれの場合も、.OptionBox は、最も広いオプションの最適な幅にプッシュされることはありません。折り返しは、最大幅に達したときにのみ発生するはずですよね? ここにそれのフィドルがあります。

私が求めているのは、月を求めていると確信していますが、OptionBoxの幅から離れないようにスクロールバーを再配置する方法、またはブラウザに伝える魔法のCSSルールのいずれかですサイジング時にスクロールバーを考慮する (box-sizing:border-box が、要素の幅を設定するときにパディング/ボーダーを考慮するようにブラウザに指示するのと似ています)。

何かご意見は？前もって感謝します！

4

1 に答える 1

1

最も外側のdivをoverflow: hiddenに設定することで、これを修正できるはずです。そうすれば、yオーバーフローが発生せず、スクロールバーが表示されなくなります。これなしでスクロールバーが表示されないようにするCSSを見たと確信していますが、それを見つけることができません。

于 2015-09-22T18:51:18.360 に答える