86

固定のコンテナdivと、のコンテナdivがwidthありheightますoverflow: hidden。

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

間違い

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

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

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

4

8 に答える 8

102

すべてのフローティング 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>

于 2008-08-31T21:29:59.510 に答える
33

style="overflow:hidden"IE7以下のような古いブラウザでは、親divとstyle="float: left"すべての子が水平方向に整列divsすることが重要です。divs

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

于 2011-04-13T11:17:50.910 に答える
7

必要に応じて、css flexbox を使用して 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 */
  ;
}
于 2016-07-17T10:58:04.950 に答える
6

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

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

于 2008-08-31T21:24:05.907 に答える
5

clip次のプロパティを使用できます。

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

仕事に取り掛かるために必要なとにposition: absolute注意してください。overflow: hiddenclip

于 2008-08-31T21:28:31.213 に答える
4

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

要素が水平に表示されなければならない場合、コンテナは折り返されるべきではないことに注意することが重要です: white-space: nowrap

于 2015-08-28T17:57:15.150 に答える
1

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

于 2012-07-30T07:57:55.527 に答える