填充DIV和解决方法

我目前有以下代码来运行用于选择要雇用的设备的复选框。在原始代码中，我只有复选框，但现在我添加了有关设备的信息。我遇到的问题如下：填充DIV和解决方法

ONE：我想为每个项目添加填充，或者使它们宽50％，但是50％的中心。（如果有意义的话）。

二：我希望能够在没有底部“下一个”，“上一个”或“复位”按钮的情况下添加未来的设备。（由于设备信息框设置为 “浮动：左”

的jsfiddle：https://jsfiddle.net/s5xkts1u/

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？

来源

2016-03-06 Jesse

你的问题还不够清楚。 –

我想为我的“设备实验室”和“设备信息”添加填充。（15像素）然后添加一个填充围绕“设备 - 信息文本”无文本移动到其他的DIV（5像素） OR 改变当前的代码也许工作更像是一个“显示：表”？（使未来的设备更容易添加） – Jesse

[检查它]（https://jsfiddle.net/frayne_konok/s5xkts1u/1/）。那么'设备信息文本'呢？文字太长，所以你想要做什么？ –

Hav你尝试过使用CSS框架和网格系统，比如Bootstrap或Foundation？

不幸的是，您的代码非常复杂，难以遵循，过度使用ing会导致问题。

来源

2016-03-06 09:54:48 WannabeYoda

在评论部分做这件事，这是答案区。 –

这应该是一个评论 –

我已经创建了一个jsFiddle（希望）使事情更清楚一点。 – Jesse

填充DIV和解决方法

回答

相关问题