CSS를 사용하여 서로 옆에 두 개의 텍스트 열을 만들려면 어떻게해야합니까? --------</p> <p>dfasfasdfsa (공간과 -----을)</p> <p>:

Question

나는이 사용하는 CSS와 같은 텍스트의 두 열을 포맷 할 수있는 최선의 방법을 결정하기 위해 노력하고있어 ---- fdafsadfasdfasdf

fdsafadsfaf ------------ fadsdsafasfsaf

fdfgfgdsdffd ----------- fgdhfjshkjahjkh

fdljkgjklkj ----- ---------- jfkldjskafljaf

나는 그것을 무력으로 배치 할 수는 있지만 더 쉬운 방법이 있어야한다고 확신한다. 초급 질문에 사과드립니다.

Answer 1

사용이 분할 태그와의 그 외 float의 property float 속성

<div style='float:left; width:30%'> 
    Put your content here... 
</div> 

<div style='float:left; width:40%; margin-left:30px'> 
    Put another content here... 
</div> 

옆으로 정렬 될 두 divs은 margin-left 속성은 두 부문 사이의 마진을 제공 할 것이다.

선택적으로 CSS를 별도의 파일에 넣은 다음 id 또는 class을 사용하여 참조 할 수 있습니다.

Answer 2

css3 열은 최신 브라우저에서 작동하며 IE8 이하는 지원하지 않습니다.

http://www.quirksmode.org/css/multicolumn.html https://developer.mozilla.org/en/CSS3_Columns

당신은 열 수 및 열 사이의 공간을 정의 할 수 있습니다

: 대안의 jQuery columnizer 플러그인 작품을

div {column-count:2; column-gap: 20px;} 

을 크로스 브라우저 :

http://welcome.totheinter.net/columnizer-jquery-plugin/

Answer 3

나는 Chibuzo의 솔루션을 확장하고 여기있다 :

CSS :

.col1 { 
    float:left; 
    width:100px; 
    background-color: #E8F6F7; 
} 

.col2 { 
    float:left; 
    width:200px; 
    margin-left:30px; 
    background-color: #f2dede; 
} 

HTML :

<div class="col1">       
    <div>Monday:</div> 
    <div>Tuesday:</div> 
    <div>Wednesday:</div>       
</div> 

<div class="col2"> 
    <div>open 8am to 5pm</div> 
    <div>open 9am to 4pm</div> 
    <div>open 9am to 6pm</div>       
</div> 

과는 다음과 같습니다

,536,

나는 위치, 및 절대 과 함께이 작업을 시도했지만 오히려 실망 스러울 수 있습니다.