Question

如果设备是移动设备，我想垂直包裹三个div。我遇到的问题是将所有三个div分开的边界。在大型显示器上查看此站点时，将有3个内嵌div，其中2个边框将列分隔为100％高度。当这些div包裹在一个小屏幕上时，边框不会到达底部。有没有办法做到这一点，以便当这些div包裹时，两个边框都会碰到地板？

<!DOCTYPE html>
<html>
    <head>

        <style type="text/css">
            html,body {
                margin:0;
                padding:0;
                height:100%;
                width:100%;
            }

            #left {
                float:left;
                width:33%;
                height:100%;
                min-width:300px;
                border-right:1px solid
            }

            #middle {
                float:left;
                width:33%;
                height:100%;
                min-width:300px;
                border-right:1px solid;
            }

            #right {
                float:left;
                width:33%;
                height:100%;
                min-width:300px;
                border-right:1px solid;
            }
        </style>
    </head>

    <body>
        <div style="height:100%">

            <div id="left">
                <div>1</div>
                <div>1</div>
                <div>1</div>
                <div>1</div>
                <div>1</div>
            </div>

            <div id="middle">
                <div>2</div>
                <div>1</div>
                <div>1</div>
                <div>1</div>
                <div>1</div>
            </div>

            <div id="right">
                <div>3</div>
                <div>1</div>
                <div>1</div>
                <div>1</div>
                <div>1</div>
            </div>

        </div>
    </body>
</html>

Answer 1

删除

 height:100%;

来自#left，＃middle，＃right并定义一些边距，如：

margin-bottom:10px;

JsFiddle：http://jsfiddle.net/KsvgV/1/

Answer 2

要解决您的问题，您只需将margin-bottom添加到您的风格中。

margin-bottom:2%;

好吧，对所有人#left, #right and #middle, 你最好使用同一个类添加它们来减少css。

看看这个，我编辑了代码：

http://jsfiddle.net/jdniki/3xr6v/

如何为移动设备包装三个div

2 个答案: