동일한 줄에 2 개의 div 태그를 표시하려고합니다.

Question

프론트 엔드에 별도의 줄에 표시되는 2 개의 div 태그가 있습니다. 같은 줄에 표시하고 싶습니다. 첫 번째는 제목이고 두 번째는 대답입니다.

이

<div class="field-label">Type of Institution</div> 
    <div class="field-value">Fine Arts Magnet School</div> 

현재 프런트 엔드 디스플레이 : 기관의

유형

예술 자석 학교

이 내가 원하는 무엇인가 : 기관의 유형 예를 들면 다음과 같습니다 미술 학교 Magnet School

제목과 텍스트 모두 같은 줄에 있습니다. 텍스트가 길면 머리글을 감싸고 싶습니다.

Answer 1

<div>은 사용하기에 적합하지 않습니다. 여기 Definition list with inline pairs

dt, dd { float: left } dt { clear:both }

하거나 제공하는 다른 솔루션 중 하나 설명 된대로 정말이

예술 자석 학교

에게 다음

과 기관의

<dl> <dt>Type of Institution</dt> <dd>Fine Arts Magnet School</dd> </dl>

를 입력해야 (이 질문에는 몇 가지 중복 질문이 있습니다).

Answer 2

display: inline 또는 float: left (및 그 뒤에 clear)을 사용할 수 있습니다.

CSS보기입니다. 두 번째 것은 그래서, 당신이 사용해야 페어 레이블 값 정의 목록에 대한 의미입니다 :

<style> 
dl {overflow: hidden} 
dt, dd {float: left;} 
dt {width: 150px; clear: left; font-weight: bold;} 
</style> 

<dl> 
    <dt>Type of Institution</dt> 
    <dd>Fine Arts Magnet School</dd> 

    <dt>Students</dt> 
    <dd>3000</dd> 
</dl> 

http://jsfiddle.net/jh0j3yg1/