CSS:3个div与非典型包装

Question

CSS:3个div与非典型包装

ade*_*kom 5 html css word-wrap css-float

我正在尝试完成一些非典型的div行为,所以我不确定这是否可行.

我有三个水平相邻的div:A,B和C(从左到右).当浏览器的大小时,或者如果用户的浏览器窗口太小,我想格B到落DIV A的下方,而不是在那里的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>

Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/P5xLx/

当我把div的A和B在一个表细胞和DIV下,在另一个,我可以得到格B到低于DIV A.与此唯一的问题是,它包含了两个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>

Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/cncgs/

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

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

Answer 1

小智 1

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

\n\n

<!DOCTYPE HTML>\n<html>\n<head>\n<title>Title</title>\n\n    <style type="text/css">\n        .box {\n            display: block;\n            margin: 4px;\n            background: #ccc;\n            width: 200px;\n            float:left;\n        }\n        .leftCol{width:416px; float:left}\n\n        @media screen and (max-width: 1000px){\n            .leftCol{width:208px;}\n        }\n    </style>\n</head>\n\n<body>\n    <div class="leftCol">\n        <div class="box" style="height: 200px;">div a</div>\n        <div class="box" style="height: 300px;">div b</div>\n    </div>\n    <div class="box" style="height: 500px;">div c</div>\n</body>\n</html>\n

Run Code Online (Sandbox Code Playgroud)\n\n

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

\n

归档时间：	14 年，7 月前
查看次数：	314 次
最近记录：	13 年，10 月前