0

我目前正在开发一个客户项目，我已经为它编写了自己的响应框架。到目前为止一切顺利，我遇到了一些问题。首先，我必须做一个三栏布局。没问题，即使它们必须具有相同的高度和不同的内容。

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

然后我必须在底部的每一列 1 中放置 100% 宽的按钮。我把它们从 cols 中取出，放在 cols 下方的按钮包装内，在 col-wrap 内。仍然可以正常工作。

问题来了：当我调整窗口大小时，按钮当然会停留在框下方，而不是它们所属的框下方。由于它是一个响应式网站和框架，我需要找到一种方法来修复它。

标记：

<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/

4

1 回答 1

1

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

  1. 当屏幕尺寸小于 940 像素时，将所有框的宽度更改为 100%。

  2. 使用两组单独的按钮（正常和响应），只需根据屏幕大小隐藏/显示这两个按钮。

这是下面评论中的 JS Fiddle。

于 2013-08-22T10:33:02.970 回答