Question

css的div盒子中，如何将文本放在左下角？

如图，如何实现将“文本”二字放在绿色框的左下角？

不要告诉我是空格，会超出去的。

Answer 1

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：

div {position: relative; border: 1px solid green; width: 200px; height: 80px;}

span {position: absolute;bottom: 0;}

3、浏览器运行index.html页面，此时成功实现了“文本”2个文字放到绿色div框的左下角。

Answer 2

三个办法：

1.如果绿色div里只有 文本 两个字，没其他东西的话给：文本那个框框加内边距，或者给文本加外边距

2.同上，假设还是只有 文本 两个字在绿框框里：给文本设置行高，并向右浮动，给绿色div设置固定高度，并设置超出高度范围的内容隐藏

3.无论绿框框里有没有其他东西：绿框框设置相对对齐属性，文本设置绝对对齐属性，然后用left:50px;top:45px;来控制文本位置。

第3个方法是最科学的，其次选1，2也能实现，但最不靠谱。

Answer 3

<div style="position:relative"><!--这是绿框-->
<span style="position:absolute; left:0 bottom:0">文本</span>
</div>
这就是一楼说的第三个办法

Answer 4

<div style="width:100px; height:100px; border:1px solid #f00; text-align:right; display:table-cell; vertical-align:bottom;">文本</div>