Question

我目前正在开发一个客户端项目，并且我为它编写了自己的响应式框架。到目前为止这么好，我遇到了一些问题。首先，我必须做三列布局。没问题，即使它们必须具有不同内容的相同高度。

我这样做是为了解决它：http://jsfiddle.net/teFYS/306/

然后我必须将每列1中的100％宽按钮放在底部。我把它们拿到了col上，然后将它们放在cols下面的cols下面的一个按钮包装里面。仍然可以。

问题出现了：当我调整窗口大小时，按钮当然位于盒子下面，而不是它们所属的盒子。由于它是一个响应式网站和框架，我需要找到一种方法来解决它。

标记：

<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

当屏幕尺寸小于940像素时，尝试将所有方框的宽度更改为100％，并在相应的方框后面立即包含每个按钮。

当屏幕尺寸小于940像素时，将所有方框的宽度更改为100％。
使用两组独立的按钮（正常和响应），只需根据屏幕尺寸隐藏/显示这两个按钮。

以下是评论中的JS小提琴。

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

1 个答案: