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

问题是我无法弄清楚如何让#p-details和#price-holder在#form中直接并排。对此的一些帮助将不胜感激。

Answer 1

Div是一个块元素。请尝试以下

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

顺便说一句。 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

当你创建元素内联块时，侧面会有4px的余量。因此，两个元素的组合宽度加上4px边距加上#p-details上的边框大于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;
}

为什么这些div不是彼此相邻的？

4 个答案: