三列等高，底部按鈕和響應

Question

我目前正在進行一個客戶端項目，並且已經爲它編寫了自己的響應框架。到目前爲止，我遇到了一些問題。首先，我必須做三列布局。沒問題，即使他們必須是不同的內容高度相同。

我沒有這個解決它：http://jsfiddle.net/teFYS/306/

然後我不得不放置100％寬按鈕，在各個第1列，在底部。我把它們放在col上，放在Col-wrap內的cols下面的button-wrapper中。仍然正常工作。

問題出在這裏：當我調整窗口大小時，按鈕當然在盒子下面，而不是它們屬於的盒子。由於它是一個響應式網站和框架，我需要找到一種解決方法。

標記：

<div class="row even row-col4 clearfix"> 
    <div class="col-wrap"> 
     <div class="col4 box"> 
      <p class="heading">Unser Service für Sie</p> 
      <div class="box-content"> 
       <ul class="box-menu clearfix"> 
        <li><a href="#" class="it-services">Element 1</a></li> 
        <li><a href="#" class="solutions">Client-/Serverlösungen</a></li> 
        <li><a href="#" class="cloud-services">Cloud Services</a></li> 
        <li><a href="#" class="it-security">IT-Sicherheit</a></li> 
        <li><a href="#" class="telephone">Telefonanlagen</a></li> 
       </ul> 
      </div> 
     </div> 
     <div class="col4 box"> 
      <h1>Der Betrieb</h1> 
      <div class="box-content"> 
       <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p><br /><p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p><br /> 
       <p> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
      </div> 
     </div> 
     <div class="col4 box last"> 
      <h2>Lorem Ipsum Dolor</h2> 
      <div class="box-content"> 
       <ul> 
        <li>Leistungen von Uns</li> 
        <li>Leistungen von Uns</li> 
        <li>Leistungen von Uns</li> 
        <li>Leistungen von Uns</li> 
        <li>Leistungen von Uns</li> 
        <li>Leistungen von Uns</li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <div class="button-wrapper"> 
     <div class="col4 box"> 
      <button class="btn big orange"><a href="#" title="Alle Leistungen">Alle Leistungen im Überblick</a></button> 
     </div> 
     <div class="col4 box"> 
      <button class="btn big orange"><a href="#" title="Alle Leistungen">Alle Leistungen im Überblick</a></button> 
     </div> 
     <div class="col4 box last"> 
      <button class="btn big orange"><a href="#" title="Alle Leistungen">Alle Leistungen im Überblick</a></button> 
     </div>    
    </div>   
</div> 

我創建了一個的jsfiddle，因爲CSS就太長了這裏：http://jsfiddle.net/DTMgJ/

Answer 1

嘗試改變所有的框將100％的寬度時，屏幕尺寸小於940px，並且將各個按鈕緊接在相應的框之後。

1. 當屏幕尺寸小於940像素時，將所有框的寬度更改爲100％。

2. 使用兩組獨立的按鈕（正常和響應），只是根據屏幕大小隱藏/顯示這兩個按鈕。

下面是評論下面的JS小提琴。