说明:可以改变bottom表示向下,1.5px 表示他的大小,#333 是颜色,我这里设置是黑色,你可以设置你想要的。设置right,top , left , bottom表示他所在的方向。
目标效果:每一排都要顶部对齐
方法:1、块级元素行内显示:display: inline-block
2、顶部对齐:vertical-align: text-top
实现步骤:
1、建立基本元素标签,并设置颜色区分, 设置不同高度来模拟你所说的高度不一致的情况
代码:
效果图:
2、换行:使每个li变成行内块级元素,宽度超过ul宽度时会自动换行
代码:
效果图:
3、顶部对齐:其实第二步已经做到了,是默认的顶部对齐,但经测试有时候不会顶部对齐,如:将文字去掉
所以加上一句:vertical-align: text-top更为保险了。
4、完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li{ list-style:none }
.myli {
width: 25px
margin-top: 10px
color: #ffffff
vertical-align: text-top
display: inline-block
}
</style>
</head>
<body>
<ul style="width: 100pxmargin: autoborder: #303030 1px solid">
<li class="myli" style="height: 20px background-color: #666"></li>
<li class="myli" style="height: 40px background-color: rgb(17, 233, 186)"></li>
<li class="myli" style="height: 28px background-color: rgb(11, 87, 226)"></li>
<li class="myli" style="height: 60px background-color: rgb(7, 194, 178)"></li>
<li class="myli" style="height: 10px background-color: #303030"></li>
<li class="myli" style="height: 20px background-color: #bcbe23"></li>
<li class="myli" style="height: 40px background-color: #370d85"></li>
<li class="myli" style="height: 20px background-color: #303030"></li>
</ul>
</body>
</html>
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
.str {
font: normal bold 5px Arial
/*font-size: 5px*/
color: rgb(224, 226, 226,0.4)
position: absolute
padding-left: 16px
padding-top: 53px
display: none
}
.str2 {
font: normal bold 5px Arial
/* font-size: 5px*/
color: rgb(224, 226, 226,0.4)
position: absolute
padding-left: 66px
padding-top: 130px
display: none
}
</style>
</head>
<body>
<div>HOMEANGEL</div>
<div>HOMEANGEL</div>
<img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg" style="width:100pxheight:100px" />
<div id="picture" style="width:100%margin-left: 60px">
</div>
<script>
$(function () {
var img = ["https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg"]
GetCanvas(img)
})
function AddCanvas(src, ById) {
var img = new Image()
img.src = src
img.onload = function () {
imgW = img.width
imgH = img.height
//准备canvas环境
var canvas = document.getElementById(ById)
canvas.width = img.width
canvas.height = img.height
var ctx = canvas.getContext("2d")
// 绘制图片
ctx.drawImage(img, 0, 0, img.width, img.height)
// 绘制水印
ctx.font = "20px bold Arial"
ctx.fillStyle = "rgb(224, 226, 226,0.6)"//这里是颜色
ctx.fillText("watermark watermark", 20, 60)
ctx.fillText("watermark watermark", 120, 160)
ctx.fillText("watermark watermark", 220, 220)
//ctx.fillText("HOMEANGEL", 90, 130)
canvas.style.width = "100px"
canvas.style.height = "100px"
}
}
function GetCanvas(Strhtml) {
if (Strhtml.length >0 &&Strhtml != "") {
var html = ""
for (var i = 0i <Strhtml.lengthi++) {
var str = "sample" + (i + 1)
html += ' <canvas id=' + str + ' name="test" src=' + Strhtml[i] + ' "></canvas>'
}
$("#picture").html(html)//这里图片添加到html,然后for,添加水印
}
for (var i = 0i <Strimg.lengthi++) {
var str = "sample" + (i + 1)
var src = Strhtml[i]
AddCanvas(src, str)//id没传递
}
}
</script>
</body>