CSS - div를 가로로 정렬하도록 설정

StackOverflow https://stackoverflow.com/questions/37103

  •  09-06-2019
  •  | 
  •  

문제

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

나는 float의 가로 행을 원합니다.이 컨테이너 내에 div가 남아 있습니다.왼쪽에 떠 있는 Div는 부모의 오른쪽 경계를 읽은 후 자연스럽게 아래 '라인'으로 밀려납니다.이는 부모의 키가 이를 허용하지 않는 경우에도 발생합니다.이는 다음과 같습니다.

![틀림][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 만드는 것이 중요합니다. divs 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>

뜨다:왼쪽, 디스플레이: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의 예에서는.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top