왜이 div가 서로 옆에 있지 않습니까?

Question

내가 가진 내가 가진이

<div id="form"> 
<textarea id="p-details"></textarea> 
<div id="price-holder"><span id="price">$99</span></div> 
</div> 

처럼 내 페이지 설정 문제는 I가 #의 P-내용과 # 가격 홀더를 얻는 방법을 알아낼 수 없습니다입니다이

#p-details { 
border: 2px solid black; 
border-radius: 2px; 
width: 500px; 
height: 300px; 
display: inline-block; 
} 

#form { 
margin: auto; 
width: 708px; 
} 

#price-holder { 
display: inline-block; 
width: 200px; 
height: 300px; 
} 

#price { 
font-weight: bold; 
font-size: 20px; 
text-align: center; 
display: block; 
} 

처럼 내 CSS 설정 # 형식 안에 직접 나란히 있어야합니다. 이것에 대한 약간의 도움은 크게 감사 할 것입니다.

Answer 1

Div는 블록 요소입니다. 다음을 시도하십시오.

BTW. 스팬은 인라인 요소입니다. 그것은 주위에 공간을 유지합니다. here을 참조하십시오.

Answer 2

"나란히"는 꽤 상대적인 용어이지만 문제를 올바르게 이해하면 간단한 수레를 사용할 수 있습니다.

#p-details { 
    float:left; 
    display:block; 
    border: 2px solid black; 
    border-radius: 2px; 
    width: 500px; 
    height: 300px; 
} 

#form { 
    margin: auto; 
    width: 708px; 
    overflow:hidden; 
} 

#price-holder { 
    float:left; 
    width: 200px; 
    height: 300px; 
} 

#price { 
    font-weight: bold; 
    font-size: 20px; 
    text-align: center; 
    display: block; 
} 

이 경우 당신은 당신이 당신의 기존 블록을 유지하고 단순히를 정렬 #form 다음과 같은 재정을 사용할 수 있습니다 모두 용기에 인라인 블록의 위치를 ​​유지하고 싶습니다.

#form { 
    margin: auto; 
    width: 708px; 
    text-align:left; 
} 

Answer 3

요소를 인라인 블록으로 만들면 옆에 4px 여백이 생깁니다. 따라서 두 요소의 결합 된 너비와 4px 여백 및 #p 세부 정보의 테두리는 708px보다 큽니다. 나는 너가 국경에 의해 창조 된 너비의 추가 4px를 설명하지 않았다고 믿는다.

이 당신의 스타일을 변경해보십시오 :

#p-details, #price-holder { 
display: inline-block; 
height: 300px; 
} 

#p-details { 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
border: 2px solid black; 
border-radius: 2px; 
width: 500px; 
} 

#form { 
margin: auto; 
width: 708px; 
} 

#price-holder { 
width: 200px; 
} 

#price { 
font-weight: bold; 
font-size: 20px; 
text-align: center; 
display: block; 
} 

Answer 4

당신이 시도 할 수있다, DEMO.

#p-details { 
    border: 2px solid black; 
    border-radius: 2px; 
    width: 500px; 
    height: 300px; 
    display: inline-block; 
    float:left; 
} 

#form { 
    margin: auto; 
    width: 715px; 
} 

#price-holder { 
    display: inline-block; 
    width: 200px; 
    height: 300px; 
    float:left; 
} 

#price { 
    font-weight: bold; 
    font-size: 20px; 
    text-align: center; 
    display: block; 
}