Question

除非浏览器/视口收缩到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>

Answer 1

将main和images设置为百分比值，将图像浮动到右侧。

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

如果你想保持主列有一个固定的宽度，那么试试这个：用一个容器类包围2列（主和图像）的div，然后将下面的css放在1280px以下。

.container {
    position: relative;
}

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

.images {
    margin-left: 600px;
}

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

Answer 2

漂浮物是否可能混淆效果？如果用以下内容替换最大宽度块（在包裹“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;
            }
        }

Answer 3

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

响应式CSS：div对备用分辨率没有响应

3 个答案: