Question

我正在尝试完成一些非典型的div行为，因此我不确定这是否可行。

我有三个水平相邻的div：A，B和C（从左到右）。当浏览器调整大小，或者用户的浏览器窗口太小时，我希望div B低于div A，而不是div C低于div A的典型行为。

此代码演示了典型行为：

<!DOCTYPE HTML>
<html>
<head>
    <title>
        Title
    </title>
    <style type="text/css">
        .box {
            display: inline-block;
            margin: 4px;
            background: #ccc;
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="box" style="height: 200px;">div a</div>
    <div class="box" style="height: 300px;">div b</div>
    <div class="box" style="height: 500px;">div c</div>
</body>
</html>

http://jsfiddle.net/P5xLx/

当我将div A和B放在一个table-cell中而div C放在另一个table-cell中时，我可以让div B降到div A以下。唯一的问题是左边的table-cell包含两个div不会崩溃到两个div的宽度，所以div和A以及div之间仍然存在差距。此代码显示了这种行为：

<!DOCTYPE HTML>
<html>
<head>
    <title>
        Title
    </title>
    <style type="text/css">
        .box {
            display: inline-block;
            margin: 4px;
            background: #ccc;
            width: 200px;
        }
    </style>
</head>
<body>
    <div style="display: table;">
        <div style="display: table-row;">
            <div style="display: table-cell;">
                <div class="box" style="height: 200px;">div a</div>
                <div class="box" style="height: 300px;">div b</div>
            </div>
            <div style="display: table-cell;">
                <div class="box" style="height: 500px;">div c</div>
            </div>
        </div>
    </div>
</body>
</html>

http://jsfiddle.net/cncgs/

有没有办法让左表格单元格取两个堆叠div的宽度，或者可能还有其他方法可以实现这一点，根本不涉及表格。基本上，我只需要找到一种方法让div C坐在A和B旁边，一旦B降到A以下。我试图找到一个css解决方案并避免使用javascript解决方案，例如，计算A的宽度和B并将其与左表格单元格的宽度进行比较。

编辑在上面的示例中，宽度为200px，但在实际实现中，200px是可变宽度，具体取决于用户提交的内容。我正在寻找一种可以处理可变宽度列的解决方案。

Answer 1

这怎么样？使用媒体查询来更改前两个div的容器宽度：

<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>

    <style type="text/css">
        .box {
            display: block;
            margin: 4px;
            background: #ccc;
            width: 200px;
            float:left;
        }
        .leftCol{width:416px; float:left}

        @media screen and (max-width: 1000px){
            .leftCol{width:208px;}
        }
    </style>
</head>

<body>
    <div class="leftCol">
        <div class="box" style="height: 200px;">div a</div>
        <div class="box" style="height: 300px;">div b</div>
    </div>
    <div class="box" style="height: 500px;">div c</div>
</body>
</html>

显然，宽度会根据您正在构建的内容而有所不同。

Answer 2

这可能接近你想要的

<!DOCTYPE HTML>
<html>
<head>
    <title>
        Title
    </title>
    <style type="text/css">
        .box {
            display: inline-block;
            margin: 4px;
            background: #ccc;
            width: 200px;
        }
        .left { float: left; }
        .right {float: right;}
        .wrap {max-width: 625px; overflow:auto;}
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box left" style="height: 200px;">div a</div>
        <div class="box right" style="height: 500px;">div c</div>
        <div class="box" style="height: 300px;">div b</div>
    </div>
</body>

</html>

http://jsfiddle.net/MR6fj/

唯一的问题是div c一直保持在wrap div的右边。这可能更接近你想要的。

CSS：3个div与非典型包装

2 个答案: