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 のようにすべてを 1 行で取得することです。

どんな種類の助けも大歓迎です

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

これは、テーブルに最適な場所のようです。表は、さまざまな理由からページ レイアウトに (非常に) よくありません (最も重要な理由のいくつかは、スクリーン リーダーを使用して Web ページを「見る」人にとって、表がいかに生活を困難にするかということです)。ただし、あなたの場合、データは明らかに表形式のように見えます。つまり、データを表に入れることは論理的に理にかなっています。

ただし、私が間違っている場合は、インライン ブロック要素を使用できます。インライン ブロック要素は、ブロック要素 (幅を許可するなど) とインライン要素 (含む要素で行全体を占有しないなど) のプロパティを組み合わせたものです。簡単な例を次に示します。

<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 に答える