CODEWITHSUNDEEP
htmlcssasp.net-mvc-3
cgraus
cgraus

Reputation: 812

Aligning elements in pairs in a web page

I am writing an MVC3 page, and I have images with radio buttons next to them. I want each radio button to be on the same line as it's image, but not one image per line, I want it to flow through many lines, but in pairs. I've tried wrapping the two in a div and display:inline-block works, except the radio button is above my image, not next to it. white-space: nowrap; works, but by putting only one image per line ( I could do that with a
).

Here is the code, 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>
}

Thanks for looking.

Upvotes: 0

Views: 42

Answers (1)

Marian Ban
Marian Ban

Reputation: 8168

The following example seems to be working: 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;     
}

Upvotes: 1

Related Questions