CSS-div를 가로로 정렬

고정 width및 height, 함께 컨테이너 div 가 overflow: hidden있습니다.

이 컨테이너 내에서 float : left divs의 수평 행을 원합니다. 왼쪽으로 떠 다니는 Div는 부모의 오른쪽 경계를 읽은 후 자연스럽게 아래의 '줄'로 밀립니다. 이것은 height부모가이를 허용해서는 안되는 경우에도 발생 합니다. 이것이 어떻게 보이는지 :

! [Wrong] [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"부모 div및 style="float: left"모든 자식 divs을 위해 divsIE7 이하와 같은 이전 브라우저에 대해 수평으로 정렬 하는 것이 중요 합니다.

최신 브라우저의 경우 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

이제 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 */
  ;
}

왼쪽으로 뜬다. 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>