Почему они не находятся рядом друг с другом?

Question

У меня есть настройки страницы, как этот

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

У меня есть мои настройки CSS, как этот

#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; 
} 

Проблема в том, я не могу понять, как получить # р-детали и # прайс-держатель быть непосредственно бок о бок внутри #form. Некоторая помощь с этим была бы весьма признательна.

Answer 1

Div - элемент блока. Попробуйте следующее:

<div style='display:inline-block'>Some text</div><div style='display:inline-block'>Some text</div> 

BTW. Span - это встроенный элемент. Это доцент держит пространство вокруг него. См. 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

Когда вы делаете элементы inline-block, в стороне будет 4px margin. Таким образом, объединенная ширина двух элементов плюс поля 4px плюс граница на # p-деталях больше 708px. Я считаю, что вы не учли дополнительные 4 пикселя ширины, созданные границей.

Попробуйте изменить таблицу стилей следующим образом:

#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; 
}