0

我有这样的页面设置

<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 中直接并排。对此的一些帮助将不胜感激。

4

4 回答 4

0

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

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

顺便提一句。Span 是一个内联元素。它不会保留它周围的空间。见这里。

于 2013-05-27T00:38:30.477 回答
0

“并排”是一个相当相对的术语，但如果我正确理解您的问题，您可以使用像这样的简单浮点数。

#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;
}
于 2013-05-27T00:39:46.510 回答
0

当您将元素设置为 inline-block 时，侧面会有 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;
}
于 2013-05-27T00:43:08.413 回答
0

你可以试试这个，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;
}
于 2013-05-27T00:44:04.187 回答