CSS-divを水平方向に整列させる

私は固定で、コンテナのdiv持っているwidthとheight、とをoverflow: hidden。

floatの水平方向の行が必要です：このコンテナー内の左のdiv。左にフロートしているDivは、親の右の境界を読み取った後、自然に下の「行」にプッシュします。これはheight、親のがこれを許可しない場合でも発生します。これはどのように見えるかです：

！[間違った] [1]-広告に置き換えられたイメージシャックイメージを削除しました

どのように見せたいですか：

！[右] [2]-広告に置き換えられたイメージシャックイメージを削除しました

注：必要な効果は、インライン要素＆を使用することで実現できますwhite-space: no-wrap（これが、表示されている画像での方法です）。ただし、子divはフロートされたブロックレベルの要素である必要があるため、これは私には良くありません（理由が長すぎてここで説明できません）。

フロートされたすべてのdivを保持するのに十分な幅の内部divをコンテナーに入れることができます。

#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"IE7以下のような古いブラウザでは、親divとstyle="float: left"すべての子divsがdivs水平方向に整列することが重要です。

最新のブラウザではstyle="display: table-cell"、すべての子に使用できdivs、水平方向に適切にレンダリングされます。

これはあなたが望むものに近いようです：

#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>

clipプロパティを使用できます：

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

注意position: absoluteしてoverflow: hidden取得するために必要なclip仕事に。

Float：left、display：inline-blockは、要素がコンテナの幅を超えると、両方とも要素を水平方向に整列できません。

要素を水平方向に表示する必要がある場合は、コンテナをラップしないように注意することが重要です。 white-space: nowrap

必要に応じて、cssflexboxを使用してdivを水平方向と垂直方向に整列できるようになりました。一般式は次のようになります

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

child-div {
  width: /* yoursize for each div */
  ;
}

それらを左に浮かせます。Chromeでは、少なくとも、id="container"LucaMの例ではラッパーを使用する必要はありません。

あなたはこのようなことをすることができます：

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

.child {
  background-color: blue;
  width: 150px;
  height: 50px;
}

<div id="container">
  <div id="inner">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>