0

我有一个具有如下 CSS 的 div 框：

.productinfo2 
{
margin-top: 20px;
display: inline-block;
vertical-align: top;
height: 60px;
border-style:solid;
border-width:1px;
width:800px;
float:right;
margin-right:5px;

}

这就是它现在在 HTML 中的样子：

         <img src="@Html.DisplayFor(modelItem => item.Image)" alt="" />
         <div class="productinfo2">
         <h2>@Html.DisplayFor(modelItem => item.Title)</h2>
         <p id="price">@Html.DisplayFor(modelItem => item.price)</p>
         <input type="text" class="Quantity">
         <p id="total">699</p>
         </div>

我想让文本和文本框完全像这个 img 但我似乎不能这样：

在此处输入图像描述

我的问题是将所有内容都放在一行中，例如 img。

任何形式的帮助表示赞赏

http://jsfiddle.net/TUT7G/

4

2 回答 2

1

你不远了。您真正需要在这里考虑的唯一事情是 h2 和 p 都继承了您需要摆脱的换行符。

h2 您可以使用 display:inline 轻松摆脱它。

对于 P，我只建议使用跨度。

更具体地说，使用您的代码作为示例，您可以这样做：

<html>
<style>
.productinfo2 
{
margin-top: 20px;
display: inline-block;
vertical-align: top;
height: 60px;
border-style:solid;
border-width:1px;
width:800px;
float:right;
margin-right:5px;

}

.productinfo2 h2 
{
font-family:Georgia;
font-size:18px;
color:#BED600;
display:inline;
}

#price
{
font-family: Verdana;
font-size:12px;
color:#333333;
margin-left:40%;
}

#price input
{
  width:10px;            
}    

#total
{
font-family: Verdana;
font-size:12px;
color:#333333;
margin-right:20px;
float:right;
}

</style>
<body>


         <div class="productinfo2">
         <h2>test</h2>
         <span id="price">price <input type="text" class="Quantity"></span>
         <span id="total">total: 699</span>
         </div>

         </body></html>

在 JSFiddle 上查看：http: //jsfiddle.net/muKty/

于 2012-10-31T19:23:45.030 回答
0

这似乎是一张桌子的理想场所。表格对页面布局（非常）不利，原因有很多（其中一些最重要的原因是它们使那些使用屏幕阅读器“查看”网页的人的生活变得困难）。但是，在您的情况下，您的数据显然是表格格式 - 也就是说，将其放在表格中是合乎逻辑的。

但是，如果我弄错了，那么您可以使用内联块元素。内联块元素结合了块元素的属性（例如允许宽度）和内联元素（例如在其包含元素中不占用整行）。这是一个简单的例子：

<div>
    <span style="display: inline-block; width: 10em;">text</span>
    <span style="display: inline-block; width: 10em;">more text</span>
    <span>even more text!</span>
</div>
<div>
    <span style="display: inline-block; width: 10em;">another line of text</span>
    <span style="display: inline-block; width: 10em;">more text on the next line</span>
    <span>even more text on the next line!</span>
</div>

如果您不相信它有效，这就是一个小提琴；）。

http://jsfiddle.net/wLZwb/

于 2012-10-31T19:18:14.667 回答