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

以下是我发现有用的内容：JSFiddle

<强>更新我将复选框/图像添加到两列中，就像您提出的问题一样。这个也没用css。只是一张桌子。这是小提琴：

JSFiddle

使用复选框对齐图片

2 个答案: