CSS-div를 가로로 정렬

CSS-div를 가로로 정렬

---

오버플로 : 숨김이있는 고정 너비와 높이의 컨테이너 div가 있습니다.

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

! [Wrong] [1]- 광고로 대체 된 이미지 판잣집 이미지 제거

내가보기를 원하는 방법 :

! [오른쪽] [2]- 광고로 대체 된 이미지 판잣집 이미지 제거

참고 : 내가 원하는 효과는 인라인 요소 및 공백 : 줄 바꿈 없음 (표시된 이미지에서 수행 한 방법)을 사용하여 얻을 수 있습니다. 그러나 이것은 더 많은 하위 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됩니다.

---

다음 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 : left, display : inline-block은 컨테이너 너비를 초과하는 경우 요소를 가로로 정렬하지 못합니다.

요소가 수평으로 표시되어야하는 경우 컨테이너가 래핑되지 않아야한다는 점에 유의해야합니다. white-space: nowrap

---

이제 css flexbox를 사용하여 필요한 경우 div를 가로 및 세로로 정렬 할 수 있습니다. 일반 공식은 다음과 같습니다

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

---

왼쪽으로 뜬다. Chrome에서는 적어도 id="container"LucaM의 예에서 래퍼가 필요하지 않습니다 .

참고 URL : https://stackoverflow.com/questions/37103/css-make-divs-align-horizontally