Выравнивание изображений с помощью флажков

Question

Привет всем Я испытываю серьезные проблемы, не получая флажки рядом с изображением, но имея их в столбцах, двух столбцах с изображениями с флажками, а затем с одной колонкой с cehckboxes.

Я знаю, что вы не можете увидеть фотографии, но вы получите идею

Любые советы?

код

<div class="row"> 
            <div class="box1" style="vertical-align:top; padding-left:3px"> 
             <!-- Squared TWO --> 
             <ul> 
              <li> 
               <div class="squaredTwo"> 
                <input type="checkbox" value="modeler" id="squaredTwo" name="00Nw0000004kJyc" /> 
                <label for="squaredTwo"></label> 
               </div> 
               <img src="images/check-1.jpg" alt=""> 
              </li> 
              <li> 
               <div class="squaredTwo"> 
                <input type="checkbox" value="v-modeler" id="squaredThree" name="00Nw0000004kJyc" /> 
                <label for="squaredThree"></label> 
               </div> 
               <img src="images/check-2.jpg" alt=""> 
              </li> 
             </ul> 
            </div> 
            <div class="box2" style="vertical-align:top; padding-left:15px;"> 
             <ul> 
              <li> 
               <div class="squaredTwo"> 
                <input type="checkbox" value="evolve" id="squaredfo" name="00Nw0000004kJyc" /> 
                <label for="squaredfo"></label> 
               </div> 
               <img src="images/check-3.jpg" alt=""> 
              </li> 
              <li> 
               <div class="squaredTwo"> 
                <input type="checkbox" value="communicator" id="squaredfi" name="00Nw0000004kJyc" /> 
                <label for="squaredfi"></label> 
               </div> 
               <img src="images/check-4.jpg" alt=""> 
              </li> 
             </ul> 
            </div> 
            <div class="box3" style="padding-left:25px"> 
             <ul> 
              <li> 
               <div class="squaredTwo"> 
                <input type="checkbox" value="analytics" id="squaredsi" name="00Nw0000004kJyc" /> 
                <label for="squaredsi"></label> 
               </div> 
               <img src="images/check-5.jpg" alt=""> 
              </li> 
              <li> 
               <div class="squaredTwo"> 
                <input type="checkbox" value="collector" id="squaredei" name="00Nw0000004kJyc" /> 
                <label for="squaredei"></label> 
               </div> 
               <img src="images/check-6.jpg" alt=""> 
              </li> 
              <li> 
               <div class="squaredTwo"> 
                <input type="checkbox" value="synergy" id="squaredni" name="00Nw0000004kJyc" /> 
                <label for="squaredni"></label> 
               </div> 
               <img src="images/check-7.jpg" alt=""> 
              </li> 
             </ul> 
            </div> 
           </div> 

Answer 1

Попробуйте поместить изображение в DIV. Также убедитесь, что вы закрываете свои метки изображения либо с </img> или <img src="images/check-7.jpg" alt=""/>

Fiddle

Answer 2

Я поместить изображения в DIV и положить немного CSS позади него.

CSS:

.squaredTwo { 
    width: 50px; 
    height: 25px; 
} 

Вот JS скрипку с тем, что я нашел, чтобы быть полезным: JSFiddle

UPDATE: Я добавил Флажки/изображения в две колонки, как ваш вопрос предложил. Этот также не использует css. Просто стол. Вот сценарий:

JSFiddle