css 2 列将文本 float 到两者的底部，允许一列扩展到文本中

Question

这应该是非常容易的，但对于我来说，我无法做到这一点。我有两列，可变高度。我有一个 div，文本跨越两列的底部。如果左列最长，我需要文本 div 直接穿过而不是向上 float 到右列中:

xxxxxxxxxxxxx   xxxxxxxxx
xxxxxxxxxxxxx   xxxxxxxxx
xxxxxxxxxxxxx   xxxxxxxxx
xxxxxxxxxxxxx   xxxxxxxxx
xxxxxxxxxxxxx   xxxxxxxxx
xxxxxxxxxxxxx
xxxxxxxxxxxxx
xxxxxxxxxxxxx

Heading

blah blah blah blah blah 
blah blah blah blah blah 
blah blah 

但是，如果右列最长，我需要文本流入左列下方的空间，然后环绕右列:

xxxxxxxxxxxxx   xxxxxxxxx
xxxxxxxxxxxxx   xxxxxxxxx
xxxxxxxxxxxxx   xxxxxxxxx
xxxxxxxxxxxxx   xxxxxxxxx
xxxxxxxxxxxxx   xxxxxxxxx
                xxxxxxxxx
Heading         xxxxxxxxx
                xxxxxxxxx
blah blah blah  xxxxxxxxx
blah blah blah  xxxxxxxxx
blah blah blah  xxxxxxxxx
blah blah blah
blah blah blah blah blah 
blah blah blah blah blah 
blah blah 

我还尝试使用移动样板和无网格将网站构建为响应式设置。

html/css 是什么？有人把我从痛苦中解救出来......

Answer 1

以下是您可能正在寻找的内容:
FIDDLE

HTML:

    <div id="wrap">
        <div id="leftcol"></div>
        <div id="rightcol"></div>
        <div id="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    </div>

CSS:

#leftcol, #rightcol {
    width: 200px;
    border: 1px solid black;
    display: block;
}
#content {
    clear:left;
    content:'';
}
#leftcol {
    float: left;
    height: 500px;
}
#wrap {
    width: 405px;
}
#rightcol {
    height: 800px;
    float: right;
}

只需将右栏的高度从 800px 更改为 200px 并检查结果。