web-dev-qa-db-ja.com

DIVをラップしないようにする方法は？

他の複数のDIVを含むコンテナDIVスタイルを作成する必要があります。ブラウザウィンドウが狭くなるようにサイズ変更された場合、これらのDIVはラップしないように求められます。

以下のように動作させようとしました。

<style>
   .container
   {
      min-width: 3000px;
      overflow: hidden;
   }
   .slide
   {
      float: left;
   }
</style>
<div class="container">
   <div class="slide">something</div>
   <div class="slide">something</div>
   <div class="slide">something</div>
   <div class="slide">something</div>
</div>

これはほとんどの場合に機能します。ただし、特別な場合には、レンダリングが正しくありません。 IE7のRTLでコンテナーDIVが3000px幅に変更されていることがわかりました。面倒なことになります。

コンテナDIVをラップしないようにする他の方法はありますか？

htmlcssword-wrapnowrap
156
Morgan Cheng

（white-space: nowrap;の代わりに）コンテナスタイルでoverflow: hidden;を使用してみてください

213
notkwite

要素の量がわからないために最小の幅を定義したくない場合は、私に役立つ唯一のことは：

display: inline-block;
white-space: nowrap;

しかし、ChromeとSafariでのみ：/

43
fguillen

次は私のために働いたフローティングなしで（視覚効果のためにあなたの例を少し修正しました）：

.container
{
    white-space: nowrap; /*Prevents Wrapping*/
    
    width: 300px;
    height: 120px;
    overflow-x: scroll;
    overflow-y: hidden;
}
.slide
{
    display: inline-block; /*Display inline and maintain block characteristics.*/
    vertical-align: top; /*Makes sure all the divs are correctly aligned.*/
    white-space: normal; /*Prevents child elements from inheriting nowrap.*/
    
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 5px;
}
<div class="container">
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
</div>

Divはスペースで区切ることができます。これが望ましくない場合は、margin-right: -4px;にmargin: 5px;の代わりに.slideを使用してください（見苦しいですが、 対処するのは難しい問題です ）。

27
JSideris

必要なコンボは

white-space: nowrap

親と

display: inline-block; // or inline

子供たちに

24
Funkodebat

これは私のために働いた：

.container {
  display: inline-flex;
}

.slide {
  float: left;
}
<div class="container">
  <div class="slide">something1</div>
  <div class="slide">something2</div>
  <div class="slide">something3</div>
  <div class="slide">something4</div>
</div>

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

23
Turako

overflow: hiddenは正しい動作を提供するはずです。私の推測では、カプセル化されたRTLsにfloat: leftがあるので、divが台無しになっていると思います。

そのバグに加えて、あなたは正しい行動を得ました。

10
Yuval Adam

IEの場合はwidth: 3000px;を使用してみてください。

3
Andres GR

上記のどれも私にとってはうまくいきませんでした。

私の場合、作成したユーザーコントロールに以下を追加する必要がありました。

display:inline-block;
2
J-DawG

使用できます

display: table;

コンテナのため、overflow: hidden;を避けてください。ワープのためだけに使用した場合、ジョブを実行する必要があります。

1
Paka

min-widthプロパティはInternet Explorerで正しく機能せず、これが問題の原因である可能性が高いです。

info および 多くのIE CSS問題を修正する素晴らしいスクリプト を読んでください。

1
Aistina