1

除了浏览器/视口收缩到 1280px 时，一切都运行良好，主体中的 3 个 div 全部中断。当浏览器收缩时，我只希望#related div 中断，其他 2 个 div（#main，#images）并排浮动，#images 拉伸以填充屏幕。如果您在收缩的 CSS 上为#images div 添加一个固定宽度，一切都可以完美堆叠，但我不希望#images div 具有固定宽度，我希望它伸展以填满屏幕。

想法？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, intial-scale=1.0" />
    <style type="text/css">
        body {
            margin:0;
            padding:0;
            }
        header nav {
            float:left;
            }
        header nav ul {
            margin:0;
            padding:0px;
            }
        #menu1 li {
            list-style-type:none;
            float:left;
            margin:0;
            width:200px;
            height:50px;
            background:orange;
            margin-right:1px;
            }
        #bodywrapper {
            clear:both;
            float:left;
            position:relative;
            }
        #images {
            position:relative;
            margin:0 300px 0 600px;
            background:cyan;
            }
        #main {
            position:absolute;
            top:0;
            left:0;
            width:600px;
            background:lime;
            }
        #related {
            position:absolute;
            top:0;
            right:0;
            width:300px;
            background:red;
            }
        #wrapper {
            width:100%;
            height:auto;
            margin:0;
            padding:0;
            }

        @media screen and (max-width: 1280px){
            #bodywrapper {
                clear:both;
                float:left;
                position:relative;
                }
            #images {
                float:left;
                position:relative;
                margin:0;
                background:cyan;
                }
            #main {
                float:left;
                position:relative;
                margin:0;
                width:600px;
                background:lime;
                }
            #related {
                clear:both;
                float:left;
                position:relative;
                margin:0;
                width:100%;
                background:purple;
                }
            #wrapper {
                width:100%;
                height:auto;
                margin:0;
                padding:0;
                }
            }
    </style>
    <script type="text/javascript" src="https://github.com/scottjehl/Respond/blob/master/respond.min.js"></script>
</head>
<body>
<div id="wrapper">
    <header>
        <nav>
            <ul id="menu1">
                <li><a href="">link 1</a></li>
                <li><a href="">link 2</a></li>
                <li><a href="">link 3</a></li>
                <li><a href="">link 4</a></li>
            </ul>
        </nav>
    </header>
    <div id="bodywrapper">
        <div id="main">
            111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111
        </div>
        <div id="images">
            222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
        </div>
        <div id="related">
            333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333
        </div>
    </div>
</div>
</body>
</html>
4

3 回答 3

0

使用@media 规则清除：在特定窗口宽度设置上保留第三个 div 项是基本/最简单的解决方案。

于 2013-06-03T13:31:29.957 回答
0

将 main 和 images 都设置为百分比值，并将图像设置为向右浮动。

 #main {
            float:left;
            position:relative;
            margin:0;
            width:40%;
            background:lime;
            }
 #images {
            float:right;
            position:relative;
            width: 60%;
            margin:0;
            background:cyan;
            }

如果您想保持主列具有固定宽度，请尝试以下操作：使用一类容器将 div 包裹在 2 列（主列和图像）周围，然后将以下 css 放置在 1280 像素以下。

.container {
    position: relative;
}

.main {
    width: 600px;
    position: absolute;
    top: 0;
    left: 0;
}

.images {
    margin-left: 600px;
}

http://jsfiddle.net/Pete_D/bBQnM/2/

于 2013-06-03T07:35:15.217 回答
0

浮动是否可能只是混淆效果？如果您将最大宽度块替换为以下内容（在包装“3” div 时删除右边距），这是您正在寻找的效果吗？你特别提到不给#images一个宽度，所以我认为下面的60％宽度的解决方案不是你想要的......

   @media screen and (max-width: 1280px){
        #images {
        margin-right:0;
        background:cyan;
        }
        #related {
            position:relative;
            margin:0;
            width: 100%;
            background:purple;
            }
        }
于 2013-06-03T07:47:14.647 回答