三列等高，底部按钮和响应

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小提琴。