•  09-06-2019
  •  | 
  •  

質問

私はコンテナ事業部を一定の幅と高さ、オーバーフロー:非表示になります。

たい水平行のfloat:左divsす。Divsを浮かべた左自然押しの"線"下後の権利行きのtheir parent.このことが起こる場合においても高親会社のすることを認めるべきではない。これはどのように見え:

![誤][1]- 削除メゾ画像が入れ替わってしまった、広告

どう探:

![右][2]- 削除メゾ画像が入れ替わってしまった、広告

注意：の効いたいできるようになり、インライン要素&ホワイト-スペース:no-ラップはどのよう"とか"また戻ってしまったイメージ）。しかし、これは良くはない（理由も長い説明はここの子どもdivsきを浮かべたブロックレベル要素.

役に立ちましたか？

解決

が内部のコンテナは十分な広さの浮divs.

#container {
  background-color: red;
  overflow: hidden;
  width: 200px;
}

#inner {
  overflow: hidden;
  width: 2000px;
}

.child {
  float: left;
  background-color: blue;
  width: 50px;
  height: 50px;
}
<div id="container">
  <div id="inner">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

他のヒント

style="overflow:hidden" 親 div や style="float: left" すべての子ども divs 重要なの divs align横のための古いブラウザのようなIE7ます。

現代ブラウザで使用でき style="display: table-cell" すべての子ども divs そこに水平ます。

で利用できます clip 物件:

#container {
  position: absolute;
  clip: rect(0px,200px,100px,0px);
  overflow: hidden;
  background: red;
}

注意 position: absolute や overflow: hidden するのに必要な取得 clip ます。

このようありたい:

#foo {
  background: red;
  max-height: 100px;
  overflow-y: hidden;
}

.bar {
  background: blue;
  width: 100px;
  height: 100px;
  float: left;
  margin: 1em;
}
<div id="foo">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

Float:左に表示:インライン-ブロックの両方合わせ要素の横を超えるの幅ます。

においてもっとも重要なことは、コンテナなラップの場合は要素を表示しなけの水平: white-space: nowrap

ができるcssを利用flexbox揃えdivsを水平方向と垂直方向の場合に必要があります。一般式は以下のようになります 

parent-div {
   display:flex;
   flex-wrap: wrap;
   justify-content: center ; /* for horizontal aligning of child divs */
   align-items : center ; /* for vertical aligning */
   }
child-div {
  width: /* yoursize for each div */ ; 
 }

Floatしています。クロムは、少なくともする必要がなくなり、より快適なるラッパー, id="container", は、LucaMの例です。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top