CSS div 가로 맞춤

컨테이너 div 안에 4 개의 div가 있습니다. 4 개 div는 서로 옆에 수평으로 정렬되어야하지만 지금은 3 개만 수평으로 정렬됩니다. 네 번째 div는 다음 줄로 나뉩니다. 여기 CSS div 가로 맞춤

는 HTML 마크 업입니다 :

<div class="col-xs-3"> 
     <div id="standards"> 
      <h5><strong>My Energy Standards</strong></h5> 
     </div> 
     <div id="years"> 
      <h5><strong>My Study Periods</strong></h5> 
      <div id="col-1"></div> 
      <div id="col-2"></div> 
      <div id="col-3"></div> 
      <div id="col-4"></div> 
     </div> 
    </div>

4 명 div의

는 #의 COL-1,2,3, 그리고 4.

여기에 CSS 마크 업입니다 :

#years{ 
    overflow: auto; 
} 
#col-1, #col-2, #col-3, #col-4{ 
    float: left; 
    padding-right: 5px; 
}

비주얼 용 이미지 :

enter image description here

년 div는 결국 표준 div와 동일한 경계를 갖게됩니다. 먼저 내가 원하는 것을하지 않는 이유를 알아야했습니다. 당신의 도움을 주셔서 감사합니다!

출처

2014-07-11 Tarang Hirani

상위 div의 너비가 너무 작아 4 개 div에 맞지 않습니다. 가로 스크롤을 추가하려고합니까? – drip

컨테이너 폭을 20pt 늘리십시오. – practice2perfect

문제는 기본적으로 부트 스트랩에서 제공하는 열 너비와 관련이있는 것 같습니다. –

이것은 사용되는 html의 일부일 뿐이지 만 (이 경우 일반적으로 좋음)이 경우에는 너비가 줄 것으로 생각되며 너의 열을 일으키는 것으로 지정된 html/css의 체인이 더 멀다고 생각한다. 단절.

여러분이 만들고있는 열의 크기보다 작은 모든 컨테이너에서 html과 css를보고 네 번째 열을 올바르게 정렬 할 수 있도록 너비를 확장해야합니다.

출처

2014-07-11 16:13:49

CSS div 가로 맞춤

답변

관련 문제