填充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和解決方法

回答

相關問題