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

Question

我正在编写一个 MVC3 页面，并且旁边有带有单选按钮的图像。我希望每个单选按钮与其图像在同一行，但不是每行一个图像，我希望它流经多行，但成对。我尝试将两者包装在一个 div 和 display:inline-block 中，除了单选按钮在我的图像上方，而不是在它旁边。空白：nowrap；可以，但是每行只放一张图片（我可以用 a 来做到这一点
）。

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