Question

什么HTML标记和CSS可以实现填充＆＃34; aaa＆＃34;从左下角span，同时环绕＆＃34; BBB＆＃34; span位于右下角：

+------------------------------+
|                              |
|                              |
|                              |
| aaa aaa aaa aaa aaa \\\\\\\\ |
| aaa aaa aaa aaa aaa \\\\\\\\ |
| aaa aaa aaa //// BBB BBB BBB |
+------------------------------+

（字符\\\和///代表两个不同的空白区域。）

类似的东西：

<div id="container">
    <span class="aaa">
        aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa
        <span class="BBB">BBB BBB BBB</span>
    </span>
</div>

示例：

+------------------------------+
|                              |
|                              |
|                              |
|                              |
|                              |
| the quick        BBB BBB BBB |
+------------------------------+

+------------------------------+
|                              |
|                              |
|                              |
|                              |
| the                          |
| quick brown      BBB BBB BBB |
+------------------------------+

+------------------------------+
|                              |
|                              |
|                              |
|                              |
| the quick                    |
| brown fox        BBB BBB BBB |
+------------------------------+

+------------------------------+
|                              |
|                              |
|                              |
|                              |
| the quick brown              |
| fox jumps        BBB BBB BBB |
+------------------------------+

+------------------------------+
|                              |
|                              |
|                              |
|                              |
| the quick brown fox          |
| jumps over       BBB BBB BBB |
+------------------------------+

+------------------------------+
|                              |
|                              |
|                              |
| the quick                    |
| brown fox jumps over         |
| the lazy dog     BBB BBB BBB |
+------------------------------+

+------------------------------+
|                              |
|                              |
|                              |
| the quick brown fox          |
| jumps over the lazy          |
| dog and then     BBB BBB BBB |
+------------------------------+

+------------------------------+
|                              |
|                              |
|                              |
| the quick brown fox \\\\\\\\ |
| jumps over the lazy \\\\\\\\ |
| dog and then//// BBB BBB BBB |
+------------------------------+

Answer 1

处理这个问题的最佳方法是绝对将“.aaa”SPAN置于底部，然后将“.BBB”SPAN浮动到右侧。我相信这是你最好的选择：

HTML：

<body>
    <div id="container">
        <span class="aaa">
            aaa
            <span class="BBB">BBB BBB BBB</span>
        </span>
    </div>
</body>

CSS：

#container {
    width: 30%;
    height: 500px;
    background: #ddd;
    position: relative;
}
.aaa {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.BBB {
    float: right;
}

JavaScript / jQuery演示内容如何流动：

$(document).ready(function(){
    setInterval(function(){ 
        $(".aaa").prepend(" aaa"); 
    }, 500);
});

JSFiddle看到它全部在行动：http://jsfiddle.net/rqtt3cv1/2/

如何从左下角填充文本范围，同时在右下角环绕文本范围？

1 个答案: