Question

我正在尝试设计一个包含两列内容的页面，div＃left和div＃right。（我知道这些不是正确的语义标识符，但它使解释更容易）两列的宽度是固定的 Desired result - wide viewport
期望的结果 - 宽视口

当视口太窄而无法并排显示时，我希望#right堆叠在#left 之上，如下所示：
Desired result - narrow viewport
期望的结果 - 狭窄的视口

我的第一个想法是将float: left应用于#left并将float: right应用于#right，但这会使#right 附加本身到窗口的右侧（毕竟这是float的正确行为，留下一个空的空间。当浏览器窗口非常宽时，这也会在列之间留下很大的差距 Opposite floats
错误 - div＃right与视口左侧齐平

将float: left应用于两个 div会导致在窗口太小时错误的移动到底部。
Wrong one on top
错误 - div＃right不在div＃left

之上

我可以通过媒体查询来做到这一点，但IE直到第9版才支持这些。源顺序不重要，但我需要能够在IE7中运行最少的东西。这可能不使用Javascript吗？

Answer 1

将一个外部容器添加到左侧浮动但没有特定宽度的2列中。

检查fiddle。

Answer 2

<html>
<head>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
    google.load("jquery", "1.4.4");
</script>

<style type="text/css">
    /*html body { height:100%; }*/

    #left { width: 500px; margin: 0 6px 0 6px; background-color:Blue; }
    #right { width: 500px; margin: 0 6px 0 6px; background-color: Orange; }
    #container { width: 1024px; }
</style>

<script type="text/javascript">

    $(function () {
        setUpFloats();

        $(window).bind("resize", setUpFloats);
    });

    function setUpFloats() {
        if ($(window).width() <= 1024) {
            $('#container').css('width', $('#right').width());
            $('#container').css('padding-left', '12px');
        } else {
            $('#container').css('width', 1024);
            $('#container').css('padding', '0');
        }
    }

</script>

</head>

<body>

<div id="container" style="float:left;">
    <div id="right" style="float:right;">right</div>
    <div id="left" style="float:right;">left</div> 

</div>

</body>
</html>

修改

我修好了，所以橙色（右）在顶部。傻我很困惑哪个图像是对的。

编辑2

修复填充

Answer 3

这让你非常接近（免责声明：我只在Chrome和Firefox中测试过），仅使用CSS：

<html>
<head>
<style type="text/css">
div.main1{ width: 40%; 
    min-width:200px;
     height: 400px;
    border: solid 1px black;
    display:inline-block;
}
div.main2{ width: 40%; 
    min-width:200px;
     height: 400px;
    border: solid 1px black;
    float:left;
}

</style>
</head>
<body>
<div class="main1">right div</div>
<div class="main2">left div</div>
</body>
</html>

诀窍是内联块显示风格......其他人可能能够在此基础上做得更好，但我觉得它很接近。

Aerik

Answer 4

这是不可能的。这是HTML的工作方式（或不起作用：P）。

至少不是我所知道的。

我猜你会在左侧留出空间。

我会尝试一些事情，如果我找到了什么就会告诉你。

我可以创建一个可以流畅地适应狭窄窗口的双列布局吗？

4 个答案: