CSS：3个带有非典型包装的div答案

【问题标题】：CSS: 3 divs with atypical wrappingCSS：3个带有非典型包装的div
【发布时间】：2011-10-25 10:28:37
【问题描述】：

我正在尝试完成一些非典型的 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 放在一个表格单元格中，将 div C 放在另一个表格单元格中时，我可以让 div B 低于 div A。唯一的问题是包含两个 div 的左侧表格单元格确实不会折叠到两个 div 的宽度，因此 div A 和 B 与 div C 之间仍然存在间隙。这段代码显示了这种行为：

<!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 的宽度，或者可能有其他方法来完成这个，它根本不涉及表格。基本上，一旦B低于A，我只需要找到一种方法让div C坐在A和B旁边。我试图找到一个css解决方案并避免使用javascript解决方案，例如计算A的宽度和 B 并将其与左侧表格单元格的宽度进行比较。

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

【问题讨论】：

标签： css html css-float word-wrap

【解决方案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>

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

【讨论】：

好的，现在我们到了某个地方。我从未意识到您可以在媒体查询中指定浏览器尺寸。现在，我的问题是有没有办法让它适应 div 宽度可变的情况？为了简单起见，我在示例中给了它们固定的宽度，但在实际实现中，它们的宽度会根据它们的内容而有所不同。
我看到可以指定最小和最大宽度的范围，但是 div 中的内容将是用户生成的，所以我无法知道它们会有多宽...
我不确定您是否可以仅使用 CSS 完成您的要求。如果您知道可以设置列宽（即使它是百分比），那可能会很好。你有没有想过使用像 jQuery Masonry 这样的东西：masonry.desandro.com 它可能比一些 CSS hack 更强大。还有一种 CSS 方法可以制作像 Masonry 这样的东西，但依赖于已知的宽度和 CSS3。 sickdesigner.com/index.php/2011/html-css/…

【解决方案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 的右侧。不过，这可能更接近您想要的。

【讨论】：