html - 在网页中成对对齐元素

Question

我正在编写一个 MVC3 页面，我的图片旁边有单选按钮。我希望每个单选按钮与其图像位于同一行，但不是每行一个图像，我希望它流经多行，但成对出现。我试过将两者包装在一个 div 中并显示:内联 block 有效，除了单选按钮在我的图像上方，而不是在它旁边。空白:nowrap；可行，但每行只放一张图片(我可以用
做到这一点)。

这是代码，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>
}

感谢您的关注。

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