여러 div를 한 줄에 표시하지만 여전히 너비를 유지하는 방법은 무엇입니까?

여러 div를 한 줄에 표시하지만 여전히 너비를 유지하는 방법은 무엇입니까?

---

일반적으로 표시 할 요소를 설정합니다. 동일한 행에 표시하려면 인라인으로 설정합니다. 그러나 요소를 인라인으로 설정하면 width 속성이 의미가 없습니다.

div를 인라인으로 만들지 않고 같은 줄에 있도록 만드는 방법은 무엇입니까?

---

사용할 수 있습니다 display:inline-block.

이 속성을 사용하면 DOM 요소가 블록 요소의 모든 속성을 가질 수 있지만 인라인으로 유지합니다. 몇 가지 단점이 있지만 대부분의 경우 충분합니다. 그것이 좋은 이유와 그것이 당신에게 효과가없는 이유.

편집 : 몇 가지 문제가 있는 유일한 최신 브라우저는 IE7입니다. Quirksmode.org 참조

---

나는 재산을 사용했다

display: table;

과

display: table-cell;

아래 fiddle에 대한 링크는 div로 래핑 된 3 개의 테이블을 보여 주며 이러한 div는 상위 div에 추가로 래핑됩니다.

<div id='content'>
   <div id='div-1'><!-- COntains table --></div>
   <div id='div-2'><!-- contains two more divs that require to be arranged one below other --></div>
</div>

여기에 jsfiddle은 다음과 같습니다 http://jsfiddle.net/vikikamath/QU6WP/1/을 나는이 디스플레이 인라인을 사용하지 않고 같은 줄에 설정 된 div를 찾고있는 사람에게 도움이 될 줄 알았는데

---

Flex가 더 나은 방법입니다. 단지 시도..

display: flex;

---

float : left를 사용하여 열 div를 부동 할 수 있습니다. 폭을줍니다.

그리고 다른 콘텐츠가 엉망이되지 않도록하려면 플로팅 div를 부모 div 내에 래핑하고 명확한 플로팅 스타일을 지정할 수 있습니다.

도움이 되었기를 바랍니다.

---

DIV에서 float : left를 사용하거나 SPAN 태그를 사용할 수 있습니다.

<div style="width:100px;float:left"> First </div> 
<div> Second </div> 
<br/>

또는

<span style="width:100px;"> First </span> 
<span> Second </span> 
<br/>

참고 URL : https://stackoverflow.com/questions/8920247/how-to-make-multiple-divs-display-in-one-line-but-still-retain-width