0

MVC3ページを作成していますが、横にラジオボタンが付いた画像があります。各ラジオボタンを画像と同じ行に配置しますが、1行に1つの画像を配置するのではなく、複数の行をペアでフローさせます。2つをdivでラップして、display：inline-blockが機能するようにしました。ただし、ラジオボタンが画像の横ではなく、画像の上にある場合を除きます。空白：nowrap; 動作しますが、1行に1つの画像のみを配置します（これは
）で実行できます。

コードは次のとおりです。FWIW：

@foreach (xxx.Image im in Model.Images)
{
   <div style="white-space: nowrap;">
         @Html.RadioButtonFor(m => m.EmailImage, im.Id, Model.EmailImage == im.Id ? new { Checked = "checked" } : null)
         <a href="/preview/@im.Url&amp;h=251&amp;w=600" target="_blank">             
         <img height="41" width="97" src="@im.ThumbUrl"/></a>
   </div>
}

見てくれてありがとう。

4

1 に答える 1

1

次の例は機能しているようです: jsfiddle。

HTML:

<div class="left">
    <input type="radio" value="check" />
    <a href="www.google.com">google</a>
    <img src="http://placehold.it/41x97"></img>    
</div>
<div class="left">
    <input type="radio" value="check" />
    <a href="www.google.com">google</a>
    <img src="http://placehold.it/41x97"></img>    
</div>
<div class="left">
    <input type="radio" value="check" />
    <a href="www.google.com">google</a>
    <img src="http://placehold.it/41x97"></img>    
</div>​

CSS:

.left
{
    float:left;    
}

.left a, .left input, .left img
{
   display:inline-block;   
   vertical-align:middle;     
}
于 2012-07-24T07:20:04.873 に答える