Question

我目前使用以下代码运行复选框以选择要雇用的设备。在原始代码中我只有复选框，但现在我添加了有关设备的信息。我有问题

ONE：我想在每个项目周围添加填充，或者使它们50％宽，但是这个50％的中心。（如果这是有道理的。）

TWO：我希望能够添加未来的设备，而不会让“NEXT”，“PREVIOUS”或“RESET”按钮向上移动。（由于设备信息框设置为“float：left”。

HTML：

          <div class="AccordionPanel" id="acc-step-3">
                <div class="AccordionPanelTab">Step Three - Equipment Package</div>
                <div class="AccordionPanelContent">

                    <div class="form-gap"></div>

                    <div class="equipment-info">
                        <div class="equipment-info-header">2x Behringer B615D PA Speakers</div>
                        <div class="equipment-info-text">
                            A pair of 1500W Behringer, Powered PA Speakers. With so much power in their sound
                            reproduction, they are sure to distribute the sound to all your audience! Not only
                            is power a major factor in this amazing German engineered beauty, but the quality
                            is second to none!
                        </div>
                    </div>
                    <input type="checkbox" name="equipment" value="speaker" id="speaker" class="equipment">
                    <label class="equipment-lab speaker" for="speaker"></label>

                    <div class="equipment-info">
                        <div class="equipment-info-header">1x Behringer B1800HP PA Subwoofer</div>
                        <div class="equipment-info-text">
                            A 2200W Behringer, Powered PA Subwoofer is one way to pack that extra BASS punch at
                            your next event! With so much power in their sound reproduction, they are sure to
                            distribute the sound to all your audience! Not only is power a major factor in this
                            amazing German engineered beauty, but the quality is second to none!
                        </div>
                    </div>
                    <input type="checkbox" name="equipment" value="subwoofer" id="subwoofer" class="equipment">
                    <label class="equipment-lab subwoofer" for="subwoofer">
                    </label>

                    <div class="equipment-info">
                        <div class="equipment-info-header">1x Smoke Machine</div>
                        <div class="equipment-info-text">
                            SMOKE MACHINE INFORMATION GOES HERE
                        </div>
                    </div>
                    <input type="checkbox" name="equipment" value="smoke-machine" id="smoke-machine" class="equipment">
                    <label class="equipment-lab smokemachine" for="smoke-machine">
                    </label>

                    <div class="equipment-info">
                        <div class="equipment-info-header">1x Moving Head</div>
                        <div class="equipment-info-text">
                            MOVING HEAD INFORMATION GOES HERE
                        </div>
                    </div>
                    <input type="checkbox" name="equipment" value="moving-head" id="moving-head" class="equipment">
                    <label class="equipment-lab acme" for="moving-head">
                    </label>

                    <div class="equipment-info">
                        <div class="equipment-info-header">1x 4 Gun Laser System</div>
                        <div class="equipment-info-text">
                            4 GUN LASER SYSTEM INFORMATION GOES HERE
                        </div>
                    </div>
                    <input type="checkbox" name="equipment" value="four-gun-laser" id="four-gun-laser" class="equipment">
                    <label class="equipment-lab fourgunlaser" for="four-gun-laser">
                    </label>

                    <div class="equipment-info">
                        <div class="equipment-info-header">1x Low Lying Smoke Machine</div>
                        <div class="equipment-info-text">
                            LOW LYING FOG MACHINE INFORMATION GOES HERE
                        </div>
                    </div>
                    <input type="checkbox" name="equipment" value="low-lying-fog" id="low-lying-fog" class="equipment">
                    <label class="equipment-lab lowlyingfog" for="low-lying-fog">
                    </label>

                    <div class="equipment-info">
                        <div class="equipment-info-header">2x 1500W Strobes</div>
                        <div class="equipment-info-text">
                            STROBE INFORMATION GOES HERE
                        </div>
                    </div>
                    <input type="checkbox" name="equipment" value="strobes" id="strobes" class="equipment">
                    <label class="equipment-lab strobes" for="strobes">
                    </label>

                    <div class="equipment-info">
                        <div class="equipment-info-header">1x Red Laser System</div>
                        <div class="equipment-info-text">
                            RED LASER SYSTEM INFORMATION GOES HERE
                        </div>
                    </div>
                    <input type="checkbox" name="equipment" value="red-laser" id="red-laser" class="equipment">
                    <label class="equipment-lab redlaser" for="red-laser">
                    </label>

                    <div class="equipment-info">
                        <div class="equipment-info-header">2x Mirror LED Lighting</div>
                        <div class="equipment-info-text">
                            MIRROR LED INFORMATION GOES HERE
                        </div>
                    </div>
                    <input type="checkbox" name="equipment" value="mirror-led" id="mirror-led" class="equipment">
                    <label class="equipment-lab mirrorled" for="mirror-led">
                    </label>

                    <div class="equipment-info">
                        <div class="equipment-info-header">6x Beamz LED Par Cans</div>
                        <div class="equipment-info-text">
                            LED PAR CAN INFORMATION GOES HERE
                        </div>
                    </div>
                    <input type="checkbox" name="equipment" value="led-pc" id="led-pc" class="equipment">
                    <label class="equipment-lab ledpc" for="led-pc">
                    </label>

                    <div class="form-gap"></div><br>

                    <input name="previous" id="acc-step-prev-3" type="button" class="form-btn form-prev" value="Previous">
                    <input name="next" id="acc-step-next-3" type="button" class="form-btn form-next" value="Next"><br>
                    <input name="reset" type="reset" class="form-btn form-reset" value="Reset">

                    <div class="form-gap"></div>

                </div>              
            </div>

CSS：

input[type=checkbox].equipment {
    display: none;
}
label {
    display: inline-block;
    padding: 0 0 0 0px;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}
.equipment-lab {
    width: 20%;
    min-width: 175px;
    max-width: 175px;
    min-height: 175px;
    max-heiht: 175px;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    float: left;
    margin: 0px;
}


input[type=checkbox]:checked + label.speaker {
    background: url(../_assets/b615_150px_checked.png);
    opacity: 1;
}
input[type=checkbox]:checked + label.subwoofer {
    background: url(../_assets/b1800hp_150px_checked.png);
    opacity: 1;
}
input[type=checkbox]:checked + label.smokemachine {
    background: url(../_assets/smoke_150px_checked.png);
    opacity: 1;
}
input[type=checkbox]:checked + label.acme {
    background: url(../_assets/acme_150px_checked.png);
    opacity: 1;
}
input[type=checkbox]:checked + label.fourgunlaser {
    background: url(../_assets/4gunlaser_150px_checked.png);
    opacity: 1;
}
input[type=checkbox]:checked + label.lowlyingfog {
    background: url(../_assets/lowlying_150px_na.png);
    opacity: 1;
}
input[type=checkbox]:checked + label.strobes {
    background: url(../_assets/strobes_150px_checked.png);
    opacity: 1;
}
input[type=checkbox]:checked + label.redlaser {
    background: url(../_assets/redlaser_150px_checked.png);
    opacity: 1;
}
input[type=checkbox]:checked + label.mirrorled {
    background: url(../_assets/mirrorled_150px_checked.png);
    opacity: 1;
}
input[type=checkbox]:checked + label.ledpc {
    background: url(../_assets/ledpc_150px_checked.png);
    opacity: 1;
}

.speaker {
    background: url(../_assets/b615_150px.png);
    opacity: 0.5;
    cursor: pointer;
    min-width: 175px;
}
.speaker:hover {
    opacity: 1;
}

.subwoofer {
    background: url(../_assets/b1800hp_150px.png);
    opacity: 0.5;
    cursor: pointer;
    min-width: 175px;
}
.subwoofer:hover {
    opacity: 1;
}

.smokemachine {
    background: url(../_assets/smoke_150px.png);
    opacity: 0.5;
    cursor: pointer;
    min-width: 175px;
}
.smokemachine:hover {
    opacity: 1;
}
.acme {
    background: url(../_assets/acme_150px.png);
    opacity: 0.5;
    cursor: pointer;
    min-width: 175px;
}
.acme:hover {
    opacity: 1;
}
.fourgunlaser {
    background: url(../_assets/4gunlaser_150px.png);
    opacity: 0.5;
    cursor: pointer;
    min-width: 175px;
}
.fourgunlaser:hover {
    opacity: 1;
}
.lowlyingfog {
    background: url(../_assets/lowlying_150px.png);
    opacity: 0.5;
    cursor: pointer;
    min-width: 175px;
}
.lowlyingfog:hover {
    opacity: 1;
}
.strobes {
    background: url(../_assets/strobes_150px.png);
    opacity: 0.5;
    cursor: pointer;
    min-width: 175px;
}
.strobes:hover {
    opacity: 1;
}
.redlaser {
    background: url(../_assets/redlaser_150px.png);
    opacity: 0.5;
    cursor: pointer;
    min-width: 175px;
}
.redlaser:hover {
    opacity: 1;
}
.mirrorled {
    background: url(../_assets/mirrorled_150px.png);
    opacity: 0.5;
    cursor: pointer;
    min-width: 175px;
}
.mirrorled:hover {
    opacity: 1;
}
.ledpc {
    background: url(../_assets/ledpc_150px.png);
    opacity: 0.5;
    cursor: pointer;
    min-width: 175px;
}
.ledpc:hover {
    opacity: 1;
}



.equipment-info {
    width: 30%;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    background: rgba(0, 0, 0, 0.5);
    float: left;
    height: 175px;
}
.equipment-info-header {
    width: 100%;
    height: 50px;
    min-width: 175px;
    font-size: 18px;
    font-family: nav-item;
    line-height: 50px;
    color: #fff;
    font-weight: 900;
    border-top-left-radius: 5px;
}
.equipment-info-text {
    width: 100%;
    height: auto;
    font-size: 12px;
    font-family: nav-item;
    color: #fff;
    margin: 0px;
    padding: 5px;
}

有没有办法做到这一点？也许是一个TABLE并使每个ITEM（图像和信息）成为一个CELL？

Answer 1

您是否尝试过将CSS框架与网格系统一起使用，例如Bootstrap或Foundation？

不幸的是，您的代码非常复杂且难以理解，过度使用float可能会导致问题。

填充DIV和解决方法

1 个答案: